ユーザーがフォームに適切なデータを入力できるようにする

ブラウザには、ユーザーがデータを正しい形式で入力したかどうかを確認する機能が組み込まれています。これらの機能を有効にするには、正しい要素と属性を使用します。さらに、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 の形式と一致するかどうかもテストします。例に示されている email フィールドは、空ではなく、入力したデータが有効なメールアドレスである場合にのみ有効です。

お客様が正しい形式で入力できるようサポートする

フィールドを必須にする方法を学習しました。フォーム欄に 8 文字以上を入力する必要があることをブラウザに指示するには、どうすればよいですか。

デモをお試しください。 変更後、入力した文字数が 8 文字未満の場合、フォームを送信することはできません。

<label for="password">Password (required)</label>
<input required="" minlength="8" type="password" id="password" name="password">

検証ルールを伝える

<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 を変更するには、どうすればよいでしょうか。ぜひお試しください。

スタイルの追加

ここでは、HTML に検証を追加する方法を学びました。検証ステータスに基づいてフォーム コントロールのスタイルも設定できたら便利ではないでしょうか？これは CSS を使用して実現できます。

必須項目のスタイルを設定する

フォームを操作する前に、入力が必須である旨をユーザーに示します。

required フィールドのスタイルは、CSS の :required 疑似クラスを使用して設定できます。

input:required {
  border: 2px solid;
}

無効なフォーム コントロールのスタイル

ユーザーが入力したデータが無効だった場合はどうなりますか？フォーム コントロールに添付されているエラー メッセージが表示されます。 この場合、要素の外観を調整するのが便利ですよね？

:invalid 疑似クラスを使用すると、無効なフォーム コントロールにスタイルを追加できます。また、有効なフォーム要素のスタイルを設定するための :valid 疑似クラスもあります。

検証に基づいてスタイルを適応させる方法は他にもあります。CSS のモジュールで、フォームのスタイル設定について学びます。

JavaScript による検証

フォームの検証をさらに強化するには、JavaScript Constraint Validation API を使用します。

わかりやすいエラー メッセージを表示する

前に学習したように、エラー メッセージはすべてのブラウザで同じではありません。すべての人に同じメッセージを見せるにはどうすればよいですか？

これを行うには、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 を使用したリアルタイム検証の実装について詳しく説明します。

理解度チェック

フォームの検証に関する知識をテストする

関連情報

• フォームの送信後に支払いボタンを無効にする
• CSS を追加してフォームの利便性を高める