Frontend Academy · レッスン

フォーム検証属性

required、minlength、maxlength、pattern、min、max、step属性を適用し、:validと:invalid擬似クラスで検証状態をスタイリングします。

「フォーム検証属性」はCoddyKit上の無料Frontend Academyレッスンです。これはレッスン4/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。

ネイティブなブラウザー検証

HTML5では、属性によってフォームを組み込みで検証できます。フォームが送信されると、ブラウザーは各フィールドを検証します。検証に失敗すると、ネイティブのエラーツールチップを表示して送信を阻止するため、基本的なケースではJavaScriptは必要ありません。

required

input、select、textareaにrequiredを追加すると、入力が必須になります。フォーム送信時にフィールドが空だと、ブラウザーがエラーを表示します。

<input type="text" name="name" required>
<select name="plan" required>
  <option value="">Choose plan...</option>
  <option value="free">Free</option>
</select>

minlengthとmaxlength

minlengthは最小文字数を指定します。maxlengthは最大文字数を超える入力を防ぎます。これらを組み合わせて、パスワードの長さの要件やコメントの長さを制限できます。

<input type="password" name="pass" minlength="12" maxlength="128">
<textarea name="bio" maxlength="500"></textarea>

数値入力のmin、max、step

minとmaxは、number入力とdate入力の有効範囲を設定します。stepは増分を設定します。範囲（5%）、小数の精度、日付のみの入力などに役立ちます。

<input type="number" min="1" max="10" step="1">
<input type="range" min="0" max="100" step="5">
<input type="date" min="2025-01-01" max="2025-12-31">

pattern — 正規表現による検証

patternはJavaScriptの正規表現を受け取ります。フォームを送信するには、入力内容がパターンに一致している必要があります。ブラウザーのエラーツールチップで期待される形式を説明するには、titleを指定します。

<!-- UK postcode: -->
<input type="text" pattern="[A-Z]{1,2}[0-9]{1,2} ?[0-9][A-Z]{2}"
  title="Enter a valid UK postcode (e.g. SW1A 1AA)">

<!-- Username: letters, digits, underscore, 3-16 chars -->
<input type="text" pattern="[a-zA-Z0-9_]{3,16}" title="3-16 alphanumeric characters">

novalidate — ネイティブ検証の無効化

<form>要素にnovalidateを追加すると、ブラウザーのネイティブ検証をすべて無効にできます。独自のJavaScript検証を実装する場合に使うと、ユーザーに一貫した操作感を提供できます。

<form novalidate id="signup">
  <!-- custom validation in JS -->
</form>

JavaScriptでの妥当性チェック

Constraint Validation APIを使うと、プログラムから妥当性をチェックできます。input.validity（ValidityStateオブジェクト）、input.checkValidity()（真偽値を返す）、input.setCustomValidity(message)（カスタムエラーを設定する）を使用します。

const email = document.querySelector('#email');
if (!email.checkValidity()) {
  console.log(email.validationMessage); // browser's error text
  console.log(email.validity.valueMissing); // true if empty
  console.log(email.validity.typeMismatch); // true if not email format
}

setCustomValidity

setCustomValidity(message)に空でない文字列を渡すと、カスタムメッセージ付きで入力を無効として扱えます。空文字列を渡すとエラーを解除できます。ユーザー名の重複のように、サーバーで検証するフィールドに便利です。

const username = document.querySelector('#username');
// After async uniqueness check:
if (taken) {
  username.setCustomValidity('This username is already taken.');
} else {
  username.setCustomValidity(''); // valid
}

:validと:invalid疑似クラス

CSSの疑似クラスを使って、妥当な入力と無効な入力をスタイル設定できます。ただし、ユーザーが操作する前から入力は:invalidになります。まずJavaScriptで「touched」クラスを追加するか、:user-invalid（最新のブラウザー）を使用してください。

/* Modern approach */
input:user-invalid {
  border-color: #e53e3e;
}
input:user-valid {
  border-color: #38a169;
}

/* Fallback: add .touched class on blur */
.touched:invalid { border-color: #e53e3e; }

reportValidityによるカスタムエラーメッセージ

form.reportValidity()は、すべてのフィールドに対してブラウザー標準の検証UIを表示します。カスタムの妥当性メッセージを設定した後に使用すると、submitイベントを待たずにユーザーへ表示できます。

アクセシブルなエラー表示パターン

インラインエラーは、次の方法で表示します。1）入力要素にaria-invalid="true"を設定する、2）aria-describedbyで関連付けた、表示可能なエラーパラグラフを用意する、3）最初の無効なフィールドにフォーカスを移動する。この方法は、スクリーンリーダーのユーザーを含むすべてのユーザーに役立ちます。

確認問題

テキスト入力を最大280文字に制限する属性はどれですか？

まとめ：フォーム検証属性

required、minlength/maxlength、min/max/step、patternは、いずれもブラウザー標準の検証を無料で提供します。カスタムのJavaScript検証を実装する場合は、novalidateを使用します。Constraint Validation APIを使うと、JavaScriptから妥当性の状態にアクセスできます。ユーザーが操作した後のエラーは:user-invalidでスタイル設定します。

よくある質問

「フォーム検証属性」レッスンは無料ですか？

はい。「フォーム検証属性」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。

「フォーム検証属性」で何を学びますか？

required、minlength、maxlength、pattern、min、max、step属性を適用し、:validと:invalid擬似クラスで検証状態をスタイリングします。ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Frontend Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのFrontend Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン4/4です。

「フォーム検証属性」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このFrontend Academyレッスンでコードを書いて実行できますか？

はい。すべてのFrontend Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Frontend Academyに戻る