制約

4.10.21 制約

4.10.21.1 定義

サブミット可能要素は、要素を制約バリデーションから除外する条件に一致しないときを除き、制約バリデーション候補となります。(例えば、object 要素は、制約バリデーションから除外されます。)

要素は、独自の妥当性エラーメッセージを持つことができます。当初は、要素は空文字列にセットされた独自の妥当性エラーメッセージを持たなければいけません。その値が空文字列でないとき、その要素は独自エラーに陥っているということになります。それは、setCustomValidity() メソッドを使ってセットすることができます。ユーザーエージェントは、コントロールに問題が生じていることをユーザーに警告するときは、この独自の妥当性エラーメッセージを使うべきです。

要素は、さまざまな方法で制約することができます。次は、フォームコントロールが取り得る妥当性状態のリストです。制約バリデーションにおいては、これらはコントロールが妥当でないことを表します。(下記の定義は、非規定です。それぞれの状態がいつ適用されるのか、または適用されないのか、については、この仕様の別の箇所でさらに正確に定義しています。)

未入力に陥っている

required 属性がセットされているにもかかわらず、コントロールにがない場合(inputrequiredselectrequiredtextarearequired)、または、ラジオボタン・グループの要素で、そのグループの他の要素が required 属性を持つ場合。

タイプ不一致に陥っている

任意のユーザー入力を許容するコントロールが、正しい構文でないを持つ場合(E-mail, URL)。

パターン不一致に陥っている

コントロールが、pattern 属性を満たさないを持つ場合。

データ長超過に陥っている

コントロールが、フォームコントロールの maxlength 属性に対して長すぎるを持つ場合(inputmaxlength, textareamaxlength

データ長不足に陥っている

コントロールが、フォームコントロールの minlength 属性に対して短すぎるを持つ場合(input minlength, textarea minlength

アンダーフローに陥っている

コントロールが、min 属性に対して低すぎるを持つ場合

オーバーフローに陥っている

コントロールが、max 属性に対して高すぎるを持つ場合

ステップ不一致に陥っている

コントロールが、step 属性によって与えられた規則に一致しないを持つ場合

不完全な入力に陥っている

コントロールの入力が不完全で、ユーザーはその現在の状態のままフォームをサブミットしないほうが良いとユーザーエージェントが考える場合

独自エラーに陥っている

コントロールの独自の妥当性エラーメッセージ(その要素の setCustomValidity() メソッドによってセットされたもの)が空文字列でない場合

要素は、無効なときですら、これらの状態に陥ることがあります。ゆえに、サブミット中のフォームのバリデートがユーザーに問題を示すことはないとはいえ、これらの状態は DOM の中では表されることになります。

要素が上記のいずれの妥当性状態にも陥らないなら、その要素は制約を満たしているということになります。

4.10.21.2 制約バリデーション

ユーザーエージェントは、form 要素 form静的制約バリデーションの要求を受けたら、次の手順を実行しなければいけません。この手順は、結果として、positive(フォームのコントロールすべてが妥当)または negative(妥当でないコントロールが存在)のいずれかを返します。あわせて、妥当でない要素のリスト(空の可能性あり)を返します。ただし、スクリプトによるものは対象外となります:

  1. controls を、フォームオーナーform となるすべてのサブミット可能な要素のリストとします。そのリストはツリー順です です。

  2. invalid controls を、当初は空の要素リストとします。

  3. controls にある要素 field それぞれに対して、ツリー順に、次の副手順を実行します:

    1. field制約バリデーション候補でないなら、次の要素に移動します。

    2. そうでなければ、field制約を満たしていれば、次の要素に移動します。

    3. そうでなければ、invalid controlsfield を追加します。

  4. invalid controls が空なら、結果として positive を返し、この手順を中止します。

  5. unhandled invalid controls を、当初は空の要素リストとします。

  6. invalid controls に要素 field があれば、それぞれに対して、ツリー順に、次の副手順を実行します:

    1. field でキャンセル可能な invalid という名前のシンプルなイベントを発出します。

    2. そのイベントがキャンセルされなかったら、fieldunhandled invalid controls に追加します。

  7. unhandled invalid controls リストにある要素のリストとともに、結果として negative を返します。

ユーザーエージェントが、form 要素 formインタラクティブ制約バリデーションをすることになったら、次の手順を実行しなければいけません:

  1. form静的制約バリデーションを行い、unhandled invalid controlsを、結果が negative だったときに返される要素のリストとします。

  2. 結果が positive だったなら、その結果を返し、この手順を終了します。

  3. unhandled invalid controls に与えられた要素の少なくともひとつの制約を伴った問題をユーザーに報告します。ユーザーエージェントは、この処理において、これらの要素のひとつに、その要素に対してフォーカス手順を実行することで、フォーカスすることができます。そして、ドキュメントのスクロール位置を変更したり、その要素にユーザーの注意を引くような別のアクションを実行することができます。ユーザーエージェントは、ひとつ以上の制約違反を報告することができます。ユーザーエージェントは、適切であれば、関連の制約違反の報告を統合することができます(例えば、もし、ひとつのグループにある複数のラジオボタンが必須とマークされているなら、エラーはひとつだけ報告される必要があります)。もし、コントロールのひとつがレンダリングされていないなら(例えば、hidden 属性がセットされている)、ユーザーエージェントは、スクリプトエラーを報告することができます。

  4. 結果として negative を返します。

4.10.21.3 The 制約バリデーション API
element . willValidate

フォームがサブミットされるとき、element がバリデートされるなら true を返し、そうでなければ false を返します。

element . setCustomValidity(message)

独自エラーをセットします。element は、バリデートに失敗するでしょう。指定の message は、ユーザーに問題を報告するときに表示されます。

引数が空文字列なら、独自エラーはクリアされます。

element . validity . valueMissing

element が必須のフィールドにもかかわらず値を持たないならtrue を返し、そうでなければ false を返します。

element . validity . typeMismatch

element の値が正しい構文でないなら true を返し、そうでなければ false を返します。

element . validity . patternMismatch

element の値が指定のパターンに一致しないなら true を返し、そうでないなら false を返します。

element . validity . tooLong

element の値が指定の最大長より長いなら true を返し、そうでなければ false を返します。

element . validity . tooShort

element の値が指定の最小長より短いなら、それが空文字列でない場合に限り、true を返し、そうでなければ false を返します。

element . validity . rangeUnderflow

element の値が指定の最小値より低いなら true を返し、そうでなければ false を返します。

element . validity . rangeOverflow

element の値が指定の最大値より高ければ true を返し、そうでなければ false を返します。

element . validity . stepMismatch

element の値が step 属性で指定された規則に一致しないならtrue を返し、そうでなければ false を返します。

element . validity . badInput

ユーザーがユーザーエンタフェースにユーザーエージェントが値に変換できない入力値を与えたら true を返します。そうでなければ false を返します。

element . validity . customError

element が独自エラーを持っているなら true を返し、そうでなければ false を返します。

element . validity . valid

element の値の妥当性に問題がひとつもなければ true を返し、そうでなければ false を返します。

valid = element . checkValidity()

element の値の妥当性に問題がひとつもなければ true を返し、そうでなければ false を返します。後者の場合においては、invalid イベントを発出します。

element . validationMessage

element が妥当性をチェックされたときにユーザーに表示されるエラーメッセージを返します。

willValidate 属性は、要素が制約バリデーション候補なら true を返し、そうでなければ false を返さなければいけません(つまり、制約バリデーションから除外される条件があれば false を返します)。

setCustomValidity(message), は、呼び出されたとき、独自妥当性エラーメッセージを、message 引数に指定された値にセットしなければいけません。

次の例では、スクリプトがフォームコントロールの値を編集される都度チェックします。そして、それが妥当な値でなければ、setCustomValidity() メソッドを使って、適切なメッセージをセットします。

<label>気持ち: <input name=f type="text" oninput="check(this)"></label>
<script>
 function check(input) {
   if (input.value == "good" ||
       input.value == "fine" ||
       input.value == "tired") {
     input.setCustomValidity('"' + input.value + '" は気持ちではありません。');
   } else {
     // 入力は問題ありません -- エラメッセージをリセットします
     input.setCustomValidity('');
   }
 }
</script>

validity 属性は、要素の妥当性状態を表す ValidityState オブジェクトを返さなければいけません。このオブジェクトはライブです。そして、このオブジェクトは、その要素の validity 属性が取得されるたびに、返されなければいけません。

interface ValidityState {
  readonly attribute boolean valueMissing;
  readonly attribute boolean typeMismatch;
  readonly attribute boolean patternMismatch;
  readonly attribute boolean tooLong;
  readonly attribute boolean tooShort;
  readonly attribute boolean rangeUnderflow;
  readonly attribute boolean rangeOverflow;
  readonly attribute boolean stepMismatch;
  readonly attribute boolean badInput;
  readonly attribute boolean customError;
  readonly attribute boolean valid;
};

ValidityState オブジェクトは、次の属性を持ちます。取得時においては、次のリストの対応する条件が true であれば true を返し、そうでなければ false を返さなければいけません。

valueMissing

コントロールが未入力に陥っている

typeMismatch

コントロールがタイプ不一致に陥っている

patternMismatch

コントロールがパターン不一致に陥っている

tooLong

コントロールがデータ長超過に陥っている

tooShort

コントロールがデータ長不足に陥っている

rangeUnderflow

コントロールがアンダーフローに陥っている

rangeOverflow

コントロールがオーバーフローに陥っている

stepMismatch

コントロールがステップ不一致に陥っている

badInput

コントロールが不完全な入力に陥っている

customError

コントロールが独自エラーに陥っている

valid

true になる条件はない。

checkValidity() メソッドが呼び出されたとき、その要素が制約バリデーション候補で、その制約を満たしていないなら、ユーザーエージェントは、その要素で、キャンセル可能(しかしこの場合、デフォルトアクションはありません)な invalid という名前のシンプルなイベントを発出し、false を返さなければいけません。そうでなければ、他に何もせずに、true を返さなければいけません。

validationMessage 属性は、その要素が制約バリデーション候補ではない、または、そうではあるがその制約を満たしているなら、空文字列を返さなければいけません。そうでなければ、適切にローカライズされたメッセージを返さなければいけません。このメッセージは、これが妥当性制約で問題がある唯一のフォームコントロールだったなら、ユーザーエージェントがユーザーに表示するであろうメッセージのことです。もし、ユーザーエージェントがそのような状況でテキストメッセージを実際に表示しないようなら(例えば、代わりにグラフィカルなキューを表示するなど)、この属性は、そのコントロールが満たさない妥当性制約(1 つ以上)を表現するメッセージを、適切にローカライズして、返さなければいけません。その要素が制約バリデーション候補r独自エラーに陥っているなら、返される値の中に、独自妥当性エラーメッセージが存在するべきです。

4.10.21.4 セキュリティ

サーバーは、クライアント側のバリデーションに依存するべきではありません。不正ユーザーはクライアント側のバリデーションを意図的にバイパスすることが可能です。また、これらの機能を実装していない古いユーザーエージェントや自動化ツールでも、意図せずに、バイパスされてしまう可能性があります。制約バリデーションの機能は、ユーザー体験の改善を目的としたものに過ぎません。一種のセキュリティメカニズムを提供するものではありません。


※ 原文:http://www.w3.org/TR/2014/REC-html5-20141028/forms.html#constraints