HTML フォーム検証と制約検証 API の使用

HTML では、基本的な制約は 2 通りの方法で定義されます。

• <input> 要素の type 属性に意味的に最も適切な値を選択する。例えば email を選択することで、値が妥当なメールアドレスであるかどうかをチェックする制約が自動的に作成されます。
• 検証関連属性を設定することで、基本的な制約を簡単な方法で、JavaScript の必要なく記述できます。

type 属性の組込み制約は次の通りです。

これらの入力型のどちらでも、multiple 属性が設定されていたら、この入力欄にカンマ区切りのリストで複数の値を設定することができます。これらの中でここで書かれた条件に満足しないものがある場合、 Type mismatch 制約違反が発生します。

なお、ほとんどの入力型には内部的な制約がありません。制約検証が禁止されているものや、不正な値を正しい既定値に変換する無害化アルゴリズムがあるものがあるためです。

上記で述べた type 属性に加えて、下記の要素が基本的な制約を記述するのに使われます。

制約検証は、制約検証 API を通じて、単一のフォーム要素、またはフォームレベルの <form> 要素自体に対して行われます。制約検証は以下の方法で行われます。

• checkValidity() または reportValidity() メソッドをフォーム関連 DOM インターフェイス (HTMLInputElement, HTMLSelectElement, HTMLButtonElement, HTMLOutputElement, HTMLTextAreaElement) に対して呼び出すことによって、この要素のみの制約を評価し、スクリプトがこの情報を取得できるようにします。 checkValidity() メソッドは、この要素の値が制約に合格するかどうかを論理値で返します。（これはふつう、 CSS 擬似クラスの :valid または :invalid のどちらを適用するかを判断する際に、ブラウザーが呼び出します。）一方、 reportValidity() メソッドはあらゆる制約違反をユーザーに報告します。
• checkValidity() または reportValidity() メソッドを HTMLFormElement インターフェイスに対して呼び出すことによって。
• フォーム自身を送信することによって。

checkValidity() を呼び出すことは、制約を静的に検証するといい、reportValidity() を呼び出したり、フォームを送信したりすることは、制約を対話的に検証するといいます。

JavaScript と制約 API を使用すると、より複雑な制約を実装することができます。例えば、複数のフィールドを組み合わせた制約や、複雑な計算を含む制約などです。

基本的には、制約に違反しているかどうかを計算するために、何らかのフォームフィールドイベント (onchangeなど) で JavaScript を起動し、検証の結果を設定するためにメソッド field.setCustomValidity() を使用することです。空文字列は制約が満たされていることを意味し、その他の文字列はエラーがあったことを意味し、この文字列がユーザーに表示するエラーメッセージになります。

郵便番号の形式は、国によって異なります。ほとんどの国では、国コードの前に任意の接頭辞を付けることができるだけでなく（ドイツでは D-、フランスやスイスでは F- のように）、固定の桁数しかない郵便番号を持つ国もありますし、イギリスのように、特定の位置にアルファベットを入れることができる、より複雑な構造を持つ国もあります。

例として、この単純なフォームの制約検証をチェックするスクリプトを追加します。

<form>
  <label for="postal-code">郵便番号: </label>
  <input type="text" id="postal-code" />
  <label for="country">国: </label>
  <select id="country">
    <option value="ch">スイス</option>
    <option value="fr">フランス</option>
    <option value="de">ドイツ</option>
    <option value="nl">オランダ</option>
  </select>
  <input type="submit" value="検証" />
</form>

これは以下のように表示されます。

まず、自分自身の制約をチェックする関数を書きます。

function checkPostalCode() {
  // それぞれの国で、郵便番号が従うべきパターンを定義する
  var constraints = {
    ch: [
      "^(CH-)?\\d{4}$",
      "スイスの郵便番号は明確な 4 桁である必要があります。例: CH-1950 または 1950",
    ],
    fr: [
      "^(F-)?\\d{5}$",
      "フランスの郵便番号は明確な 5 桁です。例: F-75012 または 75012",
    ],
    de: [
      "^(D-)?\\d{5}$",
      "ドイツの郵便番号は明確な 5 桁です。例: D-12345 または 12345",
    ],
    nl: [
      "^(NL-)?\\d{4}\\s*([A-RT-Z][A-Z]|S[BCE-RT-Z])$",
      "オランダの郵便番号は明確な 4 桁に、SA、SD、SS 以外の2文字が続きます。",
    ],
  };

  // 国 ID を読む
  const country = document.getElementById("country").value;

  // NPA フィールドを取得
  const postalCodeField = document.getElementById("postal-code");

  // 制約チェッカーを構築
  const constraint = new RegExp(constraints[country][0], "");
  console.log(constraint);

  // チェックする
  if (constraint.test(postalCodeField.value)) {
    // 郵便番号は制約に従っていることを制約検証 API を使って伝える
    postalCodeField.setCustomValidity("");
  } else {
    // 郵便番号が制約に従っていないことを伝えるために、制約検証 API を使用して
    // この国で必要な書式についてのメッセージを伝える
    postalCodeField.setCustomValidity(constraints[country][1]);
  }
}

それから、これを <select> の onchange イベントと <input> の oninput イベントにリンクします。

window.onload = () => {
  document.getElementById("country").onchange = checkPostalCode;
  document.getElementById("postal-code").oninput = checkPostalCode;
};

もう一つの一般的な制約は、アップロードされるファイルのサイズを制限することです。ファイルがサーバーに送信される前に、クライアント側でこれをチェックするには、制約検証 API、特に field.setCustomValidity() メソッドを、別の JavaScript API、ここではファイル API と組み合わせる必要があります。

こちらが HTML 部分です。

<label for="fs">75KB よりも小さいファイルを選択してください。</label>
<input type="file" id="fs" />

次のように表示されます。

JavaScript は選択されたファイルを読み込み、 File.size() メソッドを使ってそのサイズを取得し、それを（ハードコードされた）制限値と比較し、違反があった場合は Constraint API を呼び出してブラウザーに通知します。

function checkFileSize() {
  const fs = document.getElementById("fs");
  const files = fs.files;

  // 選択されているファイルが（少なくとも） 1 つある場合
  if (files.length > 0) {
    if (files[0].size > 75 * 1000) {
      // 制約をチェック
      fs.setCustomValidity("選択されたファイルは 75 kB より大きくてはいけません。");
      fs.reportValidity();
      return;
    }
  }
  // カスタム制約違反はない
  fs.setCustomValidity("");
}

最後に、このメソッドを正しいイベントにフックします。

window.onload = () => {
  document.getElementById("fs").onchange = checkFileSize;
};

制約条件を設定するだけでなく、ウェブ開発者は、ユーザーにどのようなメッセージを表示するか、どのようなスタイルにするかを制御したいと考えています。

CSS の擬似クラスで、要素の外見を制御することができます。

:required および :optional 擬似クラス

:required と :optional 擬似クラスで、required 属性がある、またはないフォーム要素に一致するセレクターを書くことができます。

:placeholder-shown 擬似クラス

:placeholder-shown を参照してください。

:valid :invalid 擬似クラス

:valid と :invalid 擬似クラスは、 <input> 要素の内容がその型の設定に応じて、それぞれ検証されたか、検証に失敗したかを表すために使用します。これらのクラスは、有効または無効なフォーム要素にスタイルを与えることで書式が正しい要素と正しくない要素の識別をしやすくします。

制約違反のテキストを制御するには、以下の項目が有用です。

• 以下の要素の setCustomValidity(message) メソッド

  • <fieldset> メモ: fieldset 要素にカスタム検証メッセージを設定しても、多くのブラウザーでは送信が抑止できません。
  • <input>
  • <output>
  • <select>
  • 送信ボタン（<button> 要素の submit 型、または input 要素の submit 型。それ以外のボタンは制約検証の対象にはなりません。
  • <textarea>

• ValidityState インターフェイスは、上記の要素型の validity プロパティによって返されるオブジェクトを説明します。入力された値が無効になる可能性がある様々な方法を表しています。これらを合わせると、要素の値が有効でない場合に、なぜ検証に失敗するのかを説明することができます。