制約

4.10.20 制約

Status: Last call for comments

4.10.20.1 定義

Status: Last call for comments

リスト化フォーム関連要素は、要素を制約バリデーションから除外する条件に一致しない限り、制約バリデーション候補となります。(例えば、output 要素や fieldset 要素は、制約バリデーションから除外されます。)

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

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

未入力に陥っている状態

required 属性がセットされているにもかかわらず、コントロールに値がない場合(input 要素の required 属性、textarea 要素の required 属性)

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

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

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

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

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

コントロールが、フォーム・コントロール maxlength 属性に対して長すぎるを持つ場合(input 要素の maxlength 属性, textarea 要素の maxlength 属性)

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

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

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

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

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

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

独自エラーに陥っている状態

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

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

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

4.10.20.2 制約バリデーション

Status: Last call for comments

ユーザーエージェントは、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.20.3 制約バリデーション API

Status: Last call for comments

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

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

element . validity . rangeOverflow

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

element . validity . stepMismatch

element の値が step 属性で指定された規則に一致しないなら、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>Feeling: <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 + '" is not a feeling.');
   } else {
     // input is fine -- reset the error message
     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 rangeUnderflow;
  readonly attribute boolean rangeOverflow;
  readonly attribute boolean stepMismatch;
  readonly attribute boolean customError;
  readonly attribute boolean valid;
};

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

valueMissing

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

typeMismatch

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

patternMismatch

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

tooLong

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

rangeUnderflow

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

rangeOverflow

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

stepMismatch

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

customError

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

valid

true になる条件はなし

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

validationMessage 属性は、その要素が制約バリデーション候補ではない、または、そうではあるがその制約を満たしているなら、空文字列を返さなければいけません。そうでなければ、適切にローカライズされたメッセージを返さなければいけません。このメッセージは、これが妥当性制約で問題があるフォーム・コントロールだったなら、ユーザーエージェントがユーザーに表示するであろうメッセージのことです。その要素が制約バリデーション候補独自エラーに陥っている状態なら、返される値の中に、独自妥当性エラー・メッセージが存在するべきです。

4.10.20.4 セキュリティ

Status: Last call for comments

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


※ 原文:http://www.w3.org/TR/2010/WD-html5-20100304/forms.html#constraints