HTML5ではフォーム機能が大幅に拡張されていて、標準機能だけでもそれなりのバリデーション(入力チェック)を実装できます。
標準機能でバリデーションを設定した際、そのバリデーションが通っているかどうかで処理を分岐させたい、ということはよくあると思います。その時に使えるのがJavaScriptのcheckValidityメソッドです。
formに対して実行
checkValidityメソッドはform要素に対して実行すると、その時のフォーム全体の入力状況を見てすべてバリデートが通っていればtrue、そうでなければfalseを返します。
例えば、以下のフォームがあったとします。
<form id="form">
<div>
名前:<input id="name" type="text" required>
</div>
<div>
年齢:<input id="age" type="number">
</div>
<div>
メール:<input id="email" type="email">
</div>
</form>
この時、何も入力しないままform要素に対してcheckValidityを実行すると、<input id="name" type="text" required>
が必須項目となっているため、ここが不正となりfalseを返します↓
const form = document.getElementById('form');
console.log(form. checkValidity()); //false
form内のすべての要素でバリデーションが通ったときだけtrueを返します。
input要素を指定して実行
checkValidityメソッドはformだけではなく、個別のinput要素でも実行することができます。先ほどと同じフォームに対して、i何も入力しない状態で以下のJavaScriptを実行したとします。
const form = document.getElementById('form');
const age = document.getElementById('age');
console.log(form.checkValidity()); //false
console.log(age.checkValidity()); //true
この時、<input id="name" type="text" required>
の必須項目があるため、フォーム全体としてはfalseとなりますが、<input id="age" type="number">
単体としてはtrueを返します。
サンプル
例に挙げたフォームで、実際にcheckValidityの挙動を確認できるデモを作りました。「フォームをチェック」ボタンをクリックするとformに、「ageをチェック」ボタンをクリックするとidがageのinput要素に対してcheckValidityを実行した結果を返します。
See the Pen checkvalidateサンプル by diwao (@diwao) on CodePen.