制約
4.10.21 制約
4.10.21.1 定義
リスト化フォーム関連要素は、要素を制約バリデーションから除外する条件に一致しない限り、制約バリデーション候補となります。(例えば、output 要素や fieldset 要素は、制約バリデーションから除外されます。)
要素は、独自の妥当性エラー・メッセージを持つことができます。当初は、要素は空文字列にセットされた独自の妥当性エラー・メッセージを持たなければいけません。その値が空文字列でないとき、その要素は独自エラーに陥っている ということになります。それは、setCustomValidity() メソッドを使ってセットすることができます。ユーザーエージェントは、コントロールに問題が生じていることをユーザーに警告するときは、この独自妥当性エラー・メッセージを使うべきです。
要素は、さまざまな方法で制約することができます。次は、フォーム・コントロールが取り得る妥当性状態のリストです。制約バリデーションにおいては、これらはコントロールが妥当でないことを表します。(下記の定義は、非規定です。それぞれの状態がどのような時に適用されるのかどうかについては、この仕様では別の箇所でさらに正確に定義しています。)
- 未入力に陥っている状態
-
required属性がセットされているにもかかわらず、コントロールに値がない場合(input要素のrequired属性、select要素のrequired属性、textarea要素のrequired属性)、または、ラジオ・ボタン・グループの要素で、そのグループの他の要素がrequired属性を持つ場合。 - タイプ不一致に陥っている状態
- パターン不一致に陥っている状態
- データ長超過に陥っている状態
-
コントロールが、フォーム・コントロール
maxlength属性に対して長すぎる値を持つ場合(input要素のmaxlength属性,textarea要素のmaxlength属性) - アンダーフローに陥っている状態
- オーバーフロー状態に陥っている状態
- ステップ不一致に陥っている状態
- 独自エラーに陥っている状態
-
コントロールの独自の妥当性エラー・メッセージ(その要素の
setCustomValidity()メソッドによってセットされたもの)が空文字列でない場合
要素は、無効なときですら、これらの状態に陥ることがあります。ゆえに、サブミット中のフォームのバリデートがユーザーに問題を示すことはないとはいえ、これらの状態は DOM の中では表されることになります。
要素が上記のいずれの妥当性状態にも陥らないなら、その要素は制約を満たしているということになります。
4.10.21.2 制約バリデーション
ユーザーエージェントは、form 要素 form の静的制約バリデーションの要求を受けたら、次の手順を実行しなければいけません。この手順は、結果として、positive(フォームのコントロールすべてが妥当)または negative(妥当でないコントロールが存在)のいずれかを返します。あわせて、妥当でない要素のリスト(空の可能性あり)を返します。ただし、スクリプトによるものは対象外となります:
-
controls を、フォーム・オーナーが form となるサブミット可能な要素のすべてのリストとします。そのリストはツリー順です です。
-
invalid controls を、当初は空の要素リストとします。
-
controls にある要素 field それぞれに対して、ツリー順に、次の副手順を実行します:
-
field が制約バリデーション候補なら、次の要素に移動します。
-
そうでなければ、field が制約を満たしていれば、次の要素に移動します。
-
そうでなければ、invalid controls に field を追加します。
-
-
invalid controls が空なら、positive 結果を返し、この手順を中止します。
-
unhandled invalid controls を、当初は空の要素リストとします。
-
invalid controls にある要素 field があれば、それぞれに対して、ツリー順に、次の副手順を実行します:
-
field でキャンセル可能な
invalidという名前のシンプルなイベントを発出します。 -
そのイベントがキャンセルされなかったら、field を unhandled invalid controls に追加します。
-
-
unhandled invalid controls リストにある要素のリストとともに、結果として negative を返します。
ユーザーエージェントが、form 要素 form のインタラクティブ制約バリデーションをすることになったら、次の手順を実行しなければいけません:
-
form の静的制約バリデーションを行い、unhandled invalid controls を、結果が negative だったときに返される要素のリストとします。
-
結果が positive だったなら、その結果を返し、この手順を終了します。
-
unhandled invalid controls で与えられた要素の少なくともひとつの制約を伴った問題をユーザーに報告します。ユーザーエージェントは、この処理において、これらの要素のひとつに、その要素に対してフォーカス手順を実行することで、フォーカスすることができます。そして、どのドキュメントのスクロール位置を変更したり、その要素にユーザーの注意を引くような別のアクションを実行することができます。ユーザーエージェントは、ひとつ以上の制約違反を報告することができます。ユーザーエージェントは、適切であれば(例えば、もし、ひとつのグループにある複数のラジオボタンが必須とマークされているなら、エラーはひとつだけ報告される必要があります)、関連の制約違反の報告を統合することができます。もし、コントロールのひとつがレンダリングされていないなら(例えば、
hidden属性がセットされている)、ユーザーエージェントは、スクリプト・エラーを報告することができます。 -
結果として negative を返します。
4.10.21.3 制約バリデーション 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.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 属性は、その要素が制約バリデーション候補ではない、または、そうではあるがその制約を満たしているなら、空文字列を返さなければいけません。そうでなければ、適切にローカライズされたメッセージを返さなければいけません。このメッセージは、これが妥当性制約で問題がある唯一のフォーム・コントロールだったなら、ユーザーエージェントがユーザーに表示するであろうメッセージのことです。もし、ユーザーエージェントがそのような状況でテキスト・メッセージを実際に表示しないようなら(例えば、代わりにグラフィカルなキューを表示するなど)、この属性は、そのコントロールが満たさない妥当性制約(1 つ以上)を表現するメッセージを、適切にローカライズして、返さなければいけません。その要素が制約バリデーション候補で独自エラーに陥っている状態なら、返される値の中に、独自妥当性エラー・メッセージが存在するべきです。
4.10.21.4 セキュリティ
サーバーは、クライアント側のバリデーションに依存するべきではありません。不正ユーザーはクライアント側のバリデーションを意図的にバイパスすることが可能です。また、これらの機能を実装していない古いユーザーエージェントや自動化ツールでも、意図せずに、バイパスされてしまう可能性があります。制約バリデーションの機能は、ユーザー・エクスペリエンスの改善を目的としたものに過ぎません。一種のセキュリティ・メカニズムを提供するものではありません。
※ 原文:http://www.w3.org/TR/2011/WD-html5-20110525/association-of-controls-and-forms.html#constraints