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.

参考