JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

HTML5のcheckValidity()メソッドとは？使い方とサンプルコードを解説

checkValidity()メソッドの概要

HTML5で導入されたcheckValidity()メソッドは、フォーム要素や入力フィールドの値が制約検証（バリデーション）のルールを満たしているかどうかを判定するためのAPIです。このメソッドはGoogle ChromeやOperaをはじめ、Firefox、Edge、Safariなど主要なモダンブラウザで広くサポートされており、JavaScriptから手軽にフォームの妥当性チェックを行うことができます。

checkValidity()を呼び出すと、要素が有効な場合はtrue、無効な場合はfalseが返されます。無効だった場合でも、form要素に対して呼び出したとき以外はエラーイベントが発生しないため、独自のバリデーションロジックを組み込みやすいのが特徴です。

実装サンプル：入力値をリアルタイムに検証する

以下のコード例では、数値入力フィールドに最小値（min=4）の制約を設定し、ユーザーが入力するたびにoninputイベント経由でcheckValidity()を実行して、入力値が有効かどうかを画面に表示します。

<!DOCTYPE html>
<html>
<body>
<style>
  .valid { color: #0B7866; }
  .invalid { color: #CC3366; }
</style>
<div id="result"></div>
<script>
  function check(input) {
    var out = document.getElementById('result');

    if (input.validity) {
      if (input.validity.valid === true) {
        out.innerHTML = "<span class='valid'>" + input.id + " は有効です</span>";
      } else {
        out.innerHTML = "<span class='invalid'>" + input.id + " は無効です</span>";
      }
    }
    console.log(input.checkValidity());
  };
</script>
<form id="testform" onsubmit="return false;">
  <label>最小値:
    <input oninput="check(this)" id="min_input" type="number" min="4" />
  </label><br>
</form>
</body>
</html>

コードのポイント解説

このサンプルの動作を理解するために、重要なポイントをいくつか解説します。

  • validityプロパティ： 入力要素はValidityStateオブジェクトを持っており、validフラグのほか、rangeOverflow（最大値超過）やvalueMissing（必須未入力）など、詳細なエラー状態を確認できます。
  • oninputイベント： ユーザーが入力するたびに検証処理が走るため、送信ボタンを押す前にリアルタイムでフィードバックを提供できます。
  • type="number" と min属性： HTML5の新しい入力タイプと制約属性を組み合わせることで、JavaScript側で複雑な判定ロジックを書かずとも、ブラウザ標準の検証機能を活用できます。
  • console.log()による確認： checkValidity()の戻り値をコンソールに出力することで、開発者ツール上でも検証結果を簡単に確認できます。

対応ブラウザについて

checkValidity()メソッドは、Google Chrome、Opera、Firefox、Microsoft Edge、Safariなど、現在利用されている主要なブラウザすべてで動作します。そのため、古いIE向けの特別な配慮が必要ない現代のWebアプリケーションでは、安心して使用できる標準的な手法といえます。

まとめ

HTML5のcheckValidity()メソッドを使えば、フォーム送信前に入力値の妥当性をプログラムから柔軟に判定できます。validityオブジェクトと組み合わせれば、どの制約に違反しているのかも特定可能であり、ユーザーにとって分かりやすいリアルタイムバリデーションの実装に役立ちます。ぜひ実際のフォーム開発に取り入れてみてください。

  1. 【HTML DOM】Input RangeのstepUp()メソッドの使い方を解説

    HTML DOMのInput Range（type=range）で利用できるstepUp()メソッドは、スライダーコントロールの現在値を指定した数だけ増加させるためのメソッドです。引数を省略した場合は1ずつ増加します。また、input要素にstep属性が指定されている場合は、そのstep値の倍数単位で値が増加します。たとえばstep=20が設定されている場合、stepUp(2)を実行すると20×2＝40だけ値が増加します。 構文 RangeオブジェクトのstepUp()メソッドの構文は以下のとおりです。 rangeObject.stepUp(number) numberは、スライダーの値をどれ

  2. HTML DOM 入力レンジ（Range）のstepDown()メソッド徹底解説

    HTML DOM Input Range stepDown()メソッドとはHTML DOMのInput Range stepDown()メソッドは、スライダー（レンジ入力）コントロールの値を指定した数だけ減少させるために使用します。引数を省略した場合は1ずつ減少します。さらに、step属性が指定されている場合は、そのステップ値の倍数単位で値が減っていきます。例えば、step=20が設定されている状態でstepDown(2)を実行すると、20×2＝40ずつ値が減少します。構文RangeオブジェクトのstepDown()メソッドの構文は以下の通りです。rangeObject.stepDown(nu