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

組み込みの基本的な制約

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

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

意味を持つ入力型

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

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

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

検証関連属性

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

制約検証プロセス

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

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

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

制約検証 API を使用した複雑な制約

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

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

複数のフィールドを組み合わせた制約：郵便番号の検証

郵便番号の書式は、国によって異なります。多くの国では、国コードの前に任意の接頭辞を付けることができます（例えば、ドイツの D-、フランスの F-、スイスの CH- など）。郵便番号の桁数が決まっている国もあれば、英国のように、特定の位置に文字を含めることができるなど、より複雑な形式を使用している国もあります。

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

<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>

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

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

const countrySelect = document.getElementById("country");
const postalCodeField = document.getElementById("postal-code");

function checkPostalCode() {
  // それぞれの国で、郵便番号が従うべきパターンを定義する
  const 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 = countrySelect.value;

  // 制約チェッカーを構築
  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> の change イベントと <input> の input イベントにリンクします。

countrySelect.addEventListener("change", checkPostalCode);
postalCodeField.addEventListener("input", checkPostalCode);

アップロード前にファイルの大きさを制限

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

こちらが HTML 部分です。

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

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

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

const fs = document.getElementById("fs");

function checkFileSize() {
  const files = fs.files;

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

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

fs.addEventListener("change", 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 プロパティによって返されるオブジェクトを説明します。入力された値が無効になる可能性がある様々な方法を表しています。これらを合わせると、要素の値が有効でない場合に、なぜ検証に失敗するのかを説明することができます。