Constraint validation API
checkValidity() は HTMLButtonElement インターフェイスのメソッドで、その要素が適用された制約検証ルールを満たしているかどうかを示す論理値を返します。false の場合は、メソッドは要素上で invalid イベントも発行します。checkValidity() には既定でブラウザーの動作が設定されていないため、この invalid イベントをキャンセルしても効果はありません。<button> 要素の type が "button" または "reset" である場合、そのボタンが制約検証になることはないので、常に true を返します。
メモ: HTML の <button> 要素で、validationMessage が null 以外の値を持つものは不正なものと見なされ、CSS の :invalid 擬似クラスに一致し、checkValidity() が false を返すようになります。 HTMLButtonElement.setCustomValidity() メソッドを使用して、HTMLButtonElement.validationMessage を空文字列に設定すると、validity 状態が妥当となります。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 4 | 12 | 4 | 5 | 18 | 5 | |
| checkValidity() は HTMLButtonElement インターフェイスのメソッドで、その要素が適用された制約検証ルールを満たしているかどうかを示す論理値を返します。false の場合は、メソッドは要素上で HTMLButtonElement/invalid_event イベントも発行します。checkValidity() には既定でブラウザーの動作が設定されていないため、この invalid イベントをキャンセルしても効果はありません。button 要素の HTMLButtonElement/type が "button" または "reset" である場合、そのボタンが制約検証になることはないので、常に true を返します。 | 4 | 12 | 4 | 5 | 18 | 5 |
| reportValidity() は HTMLButtonElement インターフェイスのメソッドで、 HTMLButtonElement.checkValidity メソッドと同じ検証のチェック手順を実行します。値が無効であった場合、このメソッドはその要素に HTMLInputElement/invalid_event イベントを発行し、(そのイベントがキャンセルされなければ)ユーザーに問題を報告します。 | 40 | 17 | 49 | 10.1 | 40 | 10.3 |
| setCustomValidity() は HTMLButtonElement インターフェイスのメソッドで、 独自の検証メッセージを button 要素に設定します。空文字列を使用すると、要素に独自の検証エラーがないことを示します。 | 4 | 12 | 4 | 5 | 18 | 5 |
| validationMessage は HTMLButtonElement インターフェイスの読み取り専用プロパティで、(もしあれば)この button コントロールが満たさない検証制約を記述したローカライズされたメッセージを表す文字列を返します。このコントロールが制約検証の対象ではない場合( の type が button または reset である場合)、または制約を満たしている場合は空文字列となります。 | 5 | 12 | 4 | 5 | 18 | 4 |
| validity は HTMLButtonElement インターフェイスの読み取り専用プロパティで、この要素の有効状態を表す ValidityState オブジェクトを返します。 | 4 | 12 | 4 | 5 | 18 | 4 |
| willValidate は HTMLButtonElement インターフェイスの読み取り専用のプロパティで、この button 要素が制約検証の対象であるかどうかを示します。制約の検証を禁止する条件のいずれかに該当する場合、false となります。条件には次のようなものがあります。 | 2 | 12 | 4 | 4 | 18 | 3 |
| HTMLFieldSetElement インターフェイスの checkValidity() メソッドは、要素が有効かどうかをチェックします。 | 4 | 12 | 4 | 5 | 18 | 5 |
| HTMLFieldSetElement インターフェイスの reportValidity() メソッドは、HTMLFieldSetElement.checkValidity メソッドと同じ有効性チェック手順を実行します。フィールドセット要素は制約検証の候補では決してないので、これは常に真を返します。 | 40 | 17 | 49 | 10.1 | 40 | 10.3 |
| HTMLFieldSetElement インターフェイスの setCustomValidity() メソッドは、 fieldset 要素のカスタム有効性メッセージを設定します。要素にカスタム妥当性エラーがないことを示すには空文字列を使用します。 | 4 | 12 | 4 | 5 | 18 | 5 |
| HTMLFieldSetElementインターフェイスのvalidationMessage読み取り専用プロパティは、フィールドセットコントロールが満たさない検証制約を記述するローカライズされたメッセージを表す文字列を返します(もしあれば)。要素は制約検証の候補ではないので、これは空文字列です(HTMLFieldSetElement.willValidateはfalseです)。 | 5 | 12 | 4 | 5 | 18 | 4 |
| HTMLFieldSetElement インターフェイスの validity 読み取り専用プロパティは、この要素が置かれている有効性状態を表す ValidityState オブジェクトを返します。フィールドセット要素が制約検証の候補になることはありませんが、カスタム妥当性メッセージが設定されている場合、妥当性状態はまだ無効かもしれません。 | 4 | 12 | 4 | 5 | 18 | 4 |
| HTMLFieldSetElement インターフェイスの willValidate 読み取り専用プロパティは false を返します。 | 2 | 12 | 4 | 4 | 18 | 3 |
| checkValidity() は HTMLFormElement インターフェイスのメソッドで、関連付けられたコントロールすべてが適用された制約検証ルールを満たしているかどうかを示す論理値を返します。 このメソッドは、値が不正な要素にそれぞれ対して HTMLInputElement/invalid_event イベントを発行しますが、このフォーム要素自体には発行しません。 checkValidity() には既定でブラウザーの動作が設定されていないため、この invalid イベントをキャンセルしても効果はありません。 | 4 | 12 | 4 | 5 | 18 | 4 |
| HTMLFormElement.reportValidity() メソッドは、この要素の子コントロールが制約検証を満たしていれば true を返します。 false が返された場合、キャンセル可能な invalid イベントが無効な子要素それぞれについて発行され、ユーザーに検証の問題を報告します。 | 40 | 17 | 49 | 10.1 | 40 | 10.3 |
| checkValidity() は HTMLInputElement インターフェイスのメソッドで、その要素が適用された制約検証ルールを満たしているかどうかを示す論理値を返します。false の場合は、メソッドは要素上で HTMLInputElement/invalid_event イベントも発行します。checkValidity() には既定でブラウザーの動作が設定されていないため、この invalid イベントをキャンセルしても効果はありません。 | 4 | 12 | 4 | 5 | 18 | 4 |
| reportValidity() は HTMLInputElement インターフェイスのメソッドで、 HTMLInputElement.checkValidity メソッドと同じ検証のチェック手順を実行します。値が無効であった場合、このメソッドはその要素に HTMLInputElement/invalid_event イベントを発行し、(そのイベントがキャンセルされなければ)ユーザーに問題を報告します。 | 40 | 17 | 49 | 10.1 | 40 | 10.3 |
| HTMLInputElement.setCustomValidity() メソッドは、その要素にカスタム検証メッセージを設定します。 | 4 | 12 | 4 | 5 | 18 | 4 |
| validationMessage は HTMLInputElement インターフェイスの読み取り専用プロパティで、(もしあれば)この input コントロールが満たしていない検証制約を記述したローカライズされたメッセージを表す文字列を返します。 | 5 | 12 | 4 | 5 | 18 | 4 |
| validity は HTMLInputElement インターフェイスの読み取り専用プロパティで、この要素の有効状態を表す ValidityState オブジェクトを返します。 | 4 | 12 | 4 | 5 | 18 | 4 |
| willValidate は HTMLInputElement インターフェイスの読み取り専用のプロパティで、この input 要素が制約検証の対象であるかどうかを示します。制約の検証を禁止する条件のいずれかに該当する場合、false となります。条件には次のようなものがあります。 | 2 | 12 | 4 | 4 | 18 | 3 |
| checkValidity() は HTMLObjectElement インターフェイスのメソッドで、常に真である論理値を返します。なぜなら、object のオブジェクトは制約検証の候補になることがないからです。 | 10 | 12 | 4 | 5.1 | 18 | 5 |
| HTMLObjectElementインターフェイスのreportValidity()メソッドは、HTMLObjectElement.checkValidityメソッドと同じ妥当性チェック手順を実行します。オブジェクト要素は決して制約検証の候補ではないので、常に真を返します。 | 40 | 18 | 49 | 10.1 | 40 | 10.3 |
| setCustomValidity() は HTMLObjectElement インターフェイスのメソッドで、この要素に独自の検証メッセージを設定します。 | 10 | 12 | 4 | 5.1 | 18 | 5 |
| validationMessage は HTMLObjectElement インターフェイスの読み取り専用プロパティで、コントロールが満たしていない制約検証を説明する、ローカライズされたメッセージを(もしあれば)文字列で返します。コントロールが制約検証の候補でない場合(willValidate が false である場合)、あるいは制約を満たしている場合には、これは空文字列となります。 | 10 | 12 | 4 | 5.1 | 18 | 5 |
| validity は HTMLObjectElement インターフェイスのメソッドで、この要素が属する検証状態を ValidityState で返します。 | 10 | 12 | 4 | 5.1 | 18 | 5 |
| willValidate は HTMLObjectElement インターフェイスの読み取り専用プロパティで、その要素が制約検証の候補であるかどうかを示す論理値を返します。HTMLObjectElement オブジェクトの場合は常に false です。 | 4 | 12 | 4 | 5 | 18 | 4 |
| HTMLOutputElementインターフェイスのcheckValidity()メソッドは、要素が有効かどうかをチェックしますが、出力要素が制約検証の候補になることはないので、常に真を返します。 | 9 | 14 | 4 | 5.1 | 18 | 5 |
| HTMLOutputElementインターフェイスのreportValidity()メソッドは、HTMLOutputElement.checkValidityメソッドと同じ妥当性チェック手順を実行します。出力要素は決して制約検証の候補ではないので、これは常に真を返します。 | 40 | 14 | 49 | 10.1 | 40 | 10.3 |
| HTMLOutputElement インターフェイスの setCustomValidity() メソッドは、 出力要素のカスタム妥当性メッセージを設定します。要素にカスタム妥当性エラーがないことを示すには空文字列を使用します。 | 9 | 14 | 4 | 5.1 | 18 | 5 |
| HTMLOutputElementインターフェイスのvalidationMessage読み取り専用プロパティは、出力コントロールが満たさない(もしあれば)検証制約を記述するローカライズされたメッセージを表す文字列を返します。要素は制約検証の候補ではないので、これは空文字列です(HTMLOutputElement.willValidateはfalseです)。 | 9 | 14 | 4 | 5.1 | 18 | 5 |
| HTMLOutputElementインターフェイスのvalidity読み込み専用プロパティは、この要素が置かれている妥当性状態を表すValidityStateオブジェクトを返します。出力要素が制約検証の候補になることはありませんが、カスタム妥当性メッセージが設定されている場合、妥当性状態はまだ無効かもしれません。 | 9 | 14 | 4 | 5.1 | 18 | 5 |
| HTMLOutputElementインターフェイスのwillValidate読み取り専用プロパティはfalseを返します。なぜなら、出力要素は制約検証の候補ではないからです。 | 9 | 14 | 4 | 5.1 | 18 | 5 |
| checkValidity() は HTMLSelectElement インターフェイスのメソッドで、その要素が適用された制約検証ルールを満たしているかどうかを示す論理値を返します。false の場合は、メソッドは要素上で HTMLElement/invalid_event イベントも発行します。checkValidity() には既定でブラウザーの動作が設定されていないため、この invalid イベントをキャンセルしても効果はありません。 | 4 | 12 | 4 | 5 | 18 | 4 |
| reportValidity() は HTMLSelectElement インターフェイスのメソッドで、 HTMLSelectElement.checkValidity メソッドと同じ妥当性確認ステップを実行します。さらに、HTMLInputElement/invalid_event イベントが取り消されない場合、ブラウザーはユーザーに問題を表示します。 | 40 | 17 | 49 | 10.1 | 40 | 10.3 |
| HTMLSelectElement.setCustomValidity() メソッドは、選択要素のカスタム検証メッセージを指定されたメッセージに設定します。要素にカスタム検証エラーがないことを示す場合は、空の文字列を使用してください。 | 4 | 12 | 4 | 5 | 18 | 4 |
| validationMessage は HTMLSelectElement インターフェイスの読み取り専用プロパティで、select コントロールが満たさない(もしあれば)検証制約を記述したローカライズされたメッセージを表す文字列を返します。これは、コントロールが制約検証の対象ではない場合(HTMLSelectElement.willValidate が false の場合)、または制約を満たしている場合は空文字列となります。 | 5 | 12 | 4 | 5 | 18 | 4 |
| validity は HTMLSelectElement インターフェイスの読み取り専用プロパティは、この要素の有効状態を表す ValidityState オブジェクトを返します。 | 4 | 12 | 4 | 5 | 18 | 4 |
| willValidate は HTMLSelectElement インターフェイスの読み取り専用のプロパティで、この select 要素が制約検証の対象となる候補であるかどうかを示します。 例えば、HTMLSelectElement.disabled プロパティが true である場合など、何か制約検証を妨げる条件がある場合は、このプロパティは false となります。 | 2 | 12 | 4 | 4 | 18 | 3 |
| checkValidity() は HTMLTextAreaElement インターフェイスのメソッドで、その要素が適用された制約検証ルールを満たしているかどうかを示す論理値を返します。false の場合は、メソッドは要素上で HTMLElement/invalid_event イベントも発行します。checkValidity() には既定でブラウザーの動作が設定されていないため、この invalid イベントをキャンセルしても効果はありません。 | 4 | 12 | 4 | 5 | 18 | 5 |
| reportValidity() は HTMLTextAreaElement インターフェイスのメソッドで、 HTMLTextAreaElement.checkValidity メソッドと同じ検証のチェック手順を実行します。さらに HTMLElement/invalid_event イベントがキャンセルされなければ、ユーザーに問題を報告します。 | 40 | 17 | 49 | 10.1 | 40 | 10.3 |
| setCustomValidity() は HTMLTextAreaElement インターフェイスのメソッドで、 textarea 要素の独自の検証メッセージを指定します。空文字列を使用すると、この要素に独自の検証エラーがないことを示します。 | 4 | 12 | 4 | 5 | 18 | 5 |
| validationMessage は HTMLTextAreaElement インターフェイスの読み取り専用プロパティで、この textarea コントロールが満たしていない検証制約をを記述したローカライズされたメッセージを表す文字列を(もしあれば)返します。 コントロールが制約検証の対象ではない場合(HTMLTextAreaElement.willValidate が false の場合)、または制約を満たしている場合は、空文字列が返されます。 | 5 | 12 | 4 | 5 | 18 | 5 |
| validity は HTMLTextAreaElement インターフェイスの読み取り専用プロパティで、この要素の有効状態を表す ValidityState オブジェクトを返します。 | 4 | 12 | 4 | 5 | 18 | 5 |
| willValidate は HTMLTextAreaElement インターフェイスの読み取り専用のプロパティで、この textarea 要素が制約検証の対象であるかどうかを示します。制約検証を禁止する条件がある場合、 false となります。例えば、 HTMLTextAreaElement.disabled または HTMLTextAreaElement.readOnly プロパティが true の場合などです。 | 2 | 12 | 4 | 4 | 18 | 3.2 |
| badInput は ValidityState オブジェクトの読み取り専用のプロパティで、ブラウザーが変換できない入力をユーザーが行ったかどうかを示します。例えば、数値の入力欄に文字列がある場合です。 | 25 | 12 | 29 | 7 | 25 | 7 |
| ValidityState インターフェイスの読み込み専用の customError プロパティは、要素が HTMLInputElement.setCustomValidity メソッドで設定されたカスタム妥当性で要求される妥当性を満たしていない場合に true を返します。 | 4 | 12 | 4 | 5 | 18 | 5 |
| patternMismatch は ValidityState オブジェクトの読み取り専用プロパティで、 input 要素の値がユーザーによって編集された後で、その要素の pattern 属性で設定された制約に適合するかどうかを示します。 | 4 | 12 | 4 | 5 | 18 | 5 |
| rangeOverflow は ValidityState オブジェクトの読み取り専用プロパティで、 input の値がユーザーに変更された後、その要素の max 属性に設定された制約に適合しないことを示します。 | 4 | 12 | 4 | 5 | 18 | 5 |
| rangeUnderflow は ValidityState オブジェクトの読み取り専用プロパティで、 input の値がユーザーに変更された後、その要素の min 属性に設定された制約に適合しないことを示します。 | 4 | 12 | 4 | 5 | 18 | 5 |
| stepMismatch は ValidityState オブジェクトの読み取り専用プロパティで、 input の値がユーザーに変更された後、その要素の step 属性に設定された制約に適合しないことを示します。 | 4 | 12 | 4 | 5 | 18 | 5 |
| tooLong は ValidityState オブジェクトの読み取り専用のプロパティで、 input や textarea の値がユーザーに変更された後、その要素の maxlength 属性で設定された最大コード単位長を超えているかどうかを示します。 | 4 | 12 | 4 | 5 | 18 | 5 |
| tooShort は ValidityState オブジェクトの読み取り専用プロパティで、 input, button, select, output, fieldset, textarea の何れかの値がユーザーによって変更された後、要素の minlength 属性で指定されたコード単位長よりも短くなったことを示します。 | 40 | 17 | 51 | 10 | 40 | 10 |
| typeMismatch は ValidityState オブジェクトの読み取り専用プロパティで、 input の値がユーザーによって変更された後、その要素の type 属性で設定された制約に適合していないことを示します。 | 4 | 12 | 4 | 5 | 18 | 5 |
| ValidityStateインターフェイスの読み取り専用のvalidプロパティは、入力要素の値がすべての検証制約を満たすかどうかを示し、したがって有効とみなされる。 | 4 | 12 | 4 | 5 | 18 | 5 |
| valueMissing は ValidityState オブジェクトの読み取り専用プロパティで、必須 (required) のコントロール、例えば input, select, textarea の値が空であることを示します。 | 4 | 12 | 4 | 5 | 18 | 5 |
- このメソッドは検証エラーのポップアップのみを更新し、要素の上にマウスカーソルを置いたときに表示されるツールチップは更新しません。
- このメソッドは検証エラーのポップアップのみを更新し、要素の上にマウスカーソルを置いたときに表示されるツールチップは更新しません。
- このメソッドは検証エラーのポップアップのみを更新し、要素の上にマウスカーソルを置いたときに表示されるツールチップは更新しません。
- このメソッドは検証エラーのポップアップのみを更新し、要素の上にマウスカーソルを置いたときに表示されるツールチップは更新しません。
- このメソッドは検証エラーのポップアップのみを更新し、要素の上にマウスカーソルを置いたときに表示されるツールチップは更新しません。
- このメソッドは検証エラーのポップアップのみを更新し、要素の上にマウスカーソルを置いたときに表示されるツールチップは更新しません。
- このメソッドは検証エラーのポップアップのみを更新し、要素の上にマウスカーソルを置いたときに表示されるツールチップは更新しません。
- このメソッドは検証エラーのポップアップのみを更新し、要素の上にマウスカーソルを置いたときに表示されるツールチップは更新しません。
- このメソッドは検証エラーのポップアップのみを更新し、要素の上にマウスカーソルを置いたときに表示されるツールチップは更新しません。
- このメソッドは検証エラーのポップアップのみを更新し、要素の上にマウスカーソルを置いたときに表示されるツールチップは更新しません。
- このメソッドは検証エラーのポップアップのみを更新し、要素の上にマウスカーソルを置いたときに表示されるツールチップは更新しません。
- このメソッドは検証エラーのポップアップのみを更新し、要素の上にマウスカーソルを置いたときに表示されるツールチップは更新しません。
- このメソッドは検証エラーのポップアップのみを更新し、要素の上にマウスカーソルを置いたときに表示されるツールチップは更新しません。
- このメソッドは検証エラーのポップアップのみを更新し、要素の上にマウスカーソルを置いたときに表示されるツールチップは更新しません。
- 最初に設定された値が長すぎて、その後ユーザーによって不正な状態に変更された場合など、ありえないケースではサポートされません。caniuse.comによる。
- 最初に設定された値が長すぎて、その後ユーザーによって不正な状態に変更された場合など、ありえないケースではサポートされません。caniuse.comによる。
基本構文
<form>
<input type="email" required id="email">
<button type="submit">Send</button>
</form>
<script>
const input = document.getElementById('email');
if (!input.checkValidity()) {
console.log('エラー:', input.validationMessage);
}
</script> ライブデモ
実務での使いどころ
-
Constraint validation API の活用
checkValidity() は HTMLButtonElement インターフェイスのメソッドで、その要素が適用された制約検証ルールを満たしているかどうかを示す論理値を返します。
注意点
- 古いブラウザでは対応していない場合がある。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。