ブラウザには、ユーザーが正しい形式でデータを入力したことを確認する検証機能が組み込まれています。 これらの機能を有効にするには、正しい要素と属性を使用します。 さらに、CSS と JavaScript を使用してフォームの検証を強化できます。
フォームを検証するべき理由
前のモジュールでは、ユーザーが同じ操作を繰り返す必要をなくす方法を学習しました。 フォームに情報を再入力する。 ユーザーが有効なデータを入力できるようにするにはどうすればよいですか。
どの項目が必要かわからずに入力するのは面倒です それらのフィールドの制約です たとえば、ユーザー名を入力してフォームを送信すると、ユーザー名には 8 文字以上が必要であることがわかりました。
ユーザーが検証ルールを定義して通知することで、ユーザーをサポートできます。
必須フィールドが誤って入力されないようにする
HTML を使用すると、フォームに入力するデータの正しい形式と制約を指定できます。 また、どのフィールドが必須であるかを指定する必要もあります。
データを入力せずにこのフォームを送信してみてください。
このフィールドが必須であることを示すエラー メッセージが <input> に添付されていますか？
これは、required 属性が原因で発生します。
<label for="name">Name (required)</label>
<input required type="text" id="name" name="name">
他にも多くの型（type="email" など）を使用できることをすでに学習しました。
必須のメールアドレス <input> を見てみましょう。
データを入力せずにこのフォームを送信してみてください。 これまでのデモとの違いはありますか？ メールのフィールドに自分の名前を入力して、送信してみてください。 異なるエラー メッセージが表示されます。なぜでしょうか。 入力した値が有効なメールアドレスではないため、別のメッセージが表示されます。
required 属性は、このフィールドが必須であることをブラウザに伝えます。
ブラウザでは、入力したデータが type の形式と一致するかどうかもテストされます。
例に示すメール フィールドは、空ではなく、入力したデータが有効なメールアドレスである場合にのみ有効です。
お客様が正しい形式を入力できるようサポートする
フィールドを必須にする方法を学びました。 フォームのフィールドに 8 文字以上の入力が必須であることをブラウザに伝えるには、どうすればよいでしょうか。
デモをぜひお試しください。 変更後に入力したフォームが 8 文字未満の場合は、送信できません。
<label for="password">Password (required)</label> <input required="" minlength="8" type="password" id="password" name="password">
属性の名前は minlength です。
値を 8 に設定すると、目的の検証ルールが完成します。
反対に、maxlength を使用します。
検証ルールを伝える
<label for="password">Password (required)</label>
<input required minlength="8" type="password" id="password"
name="password" aria-describedby="password-minlength">
<div id="password-minlength">Enter at least eight characters</div>
すべてのユーザーが検証ルールを理解していることを確認してください。
そのためには、フォームのコントロールとルールを説明する要素を接続します。
そのためには、この形式の id を使用して、aria-describedby 属性を要素に追加します。
パターン属性
さらに高度な検証ルールを定義することが必要になる場合もあります。
この場合も、HTML 属性を使用できます。
これは pattern と呼ばれ、
値として正規表現を使用します。
<label for="animal">What is your favorite animal? (required)</label>
<input required pattern="[a-z]{2,20}" type="text" id="animal" name="animal">
小文字のみを使用できます。 ユーザーが 2 ～ 20 文字で入力する必要があります。
大文字も使用できるようにするには、pattern をどのように変更すればよいですか。
こちらからお試しください。
正解は「pattern="[a-zA-Z]{2,20}"」です。
スタイルを追加する
HTML に検証を追加する方法について学習しました。 検証ステータスに基づいてフォーム コントロールのスタイルを設定できれば便利です。 これは CSS で可能です。
必須項目にスタイルを設定する方法
ユーザーがフォームを操作する前に、フィールドへの入力が必須であることをユーザーに示します。
required フィールドのスタイルを設定するには、:required CSS 疑似クラスを使用します。
input:required {
border: 2px solid;
}
無効なフォーム コントロールのスタイル
ユーザーが入力したデータが無効な場合はどうなるか覚えていますか？ フォーム コントロールに添付されたエラー メッセージが表示されます。 そのような場合に要素の外観を適応させると便利です。
:invalid 疑似クラスを使用できます。
無効なフォーム コントロールにスタイルを追加します。
また、有効なフォーム要素のスタイル設定に使用できる :valid 疑似クラスもあります。
検証に基づいてスタイルを調整する方法は他にもあります。 CSS に関するモジュールでは、フォームのスタイル設定について詳しく学びます。
JavaScript による検証
フォームの検証をさらに強化するには、 JavaScript Constraint Validation API。
わかりやすいエラー メッセージを表示する
前に説明したように、ブラウザで表示されるエラー メッセージは 同じメッセージをすべてのユーザーに表示するにはどうすればよいでしょうか。
そのためには、
setCustomValidity()
メソッドを呼び出します。
詳細を見てみましょう。
const nameInput = document.querySelector('[name="name"]');
nameInput.addEventListener('invalid', () => {
nameInput.setCustomValidity('Please enter your name.');
});
カスタムエラー メッセージを設定する要素に対してクエリを実行します。
定義した要素の invalid イベントをリッスンします。
そこで、setCustomValidity() でメッセージを設定しました。
この例では、入力が無効な場合にメッセージ Please enter your name. が表示されます。
別のブラウザでデモを開きます。 どこにでも同じメッセージが表示されます。 JavaScript を削除してから、もう一度お試しください。 デフォルトのエラー メッセージが再び表示されます。
Constraint Validation API では、他にも多くのことができます。 使用方法の詳細については、 JavaScript による検証で詳しく説明します。
リアルタイムで検証する方法
JavaScript にリアルタイム検証を追加するには、フォーム コントロールの onblur イベントをリッスンします。
ユーザーがフォームのフィールドを離れたらすぐに入力を検証できます。
デモのフォーム フィールドをクリックします。
「web」と入力しますページの他の場所をクリックします
フォーム フィールドの下に、minlength に対するネイティブ エラー メッセージが表示されます。
実装の詳細 JavaScript によるリアルタイム検証で説明します。
理解度をチェックする
フォームの検証に関する知識をテストする
フォーム コントロールを必須にするには、どの属性を使用しますか。
requiredneededessentialobligatory独自のエラー メッセージを定義することはできますか？
message HTML 属性を使用します。:invalid CSS 疑似要素を使用します。type="email" と required 属性を指定した <input> を送信できます。