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

HTML5のcheckValidity()メソッドに対応しているブラウザはある？主要ブラウザでの動作と実装例

はい、checkValidity() メソッドはGoogle ChromeやOperaをはじめとする主要なモダンブラウザで問題なく動作します。このメソッドを活用すれば、フォーム入力値がHTML5の制約検証（バリデーション）ルールを満たしているかどうかを、JavaScriptから簡単に判定できます。

checkValidity()メソッドとは

checkValidity()は、HTML5フォームバリデーションAPIの一部として提供されているメソッドです。対象の入力要素が妥当（valid）であれば true を、制約に違反していれば false を返します。あわせて validity プロパティを参照することで、値が空なのか、範囲外なのかなど、違反の種類まで詳細に把握できます。

サンプルコード

以下は、数値入力欄に入力された値が min属性（最小値： 4） の条件を満たしているかどうかを、入力のたびにリアルタイム判定する例です。

<!DOCTYPE html>
<html>
   <body>
      <style>
         .valid {
            color: #0B7866;
         }
         .invalid {
            color: #0B6877;
         }
      </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 +
                  " valid</span>";
                  } else {
                  out.innerHTML = "<span class='invalid'>" + input.id +
                 " not valid</span>";
               }
            }
            console.log(input.checkValidity());
         };
      </script>

      <form id = "testform" onsubmit = "return false;">
         <label>Minimum:
            <input oninput = "check(this)" id = "min_input"
            type = number min=4 />
         </label><br>
      </form>
   </body>
</html>

コードの解説

  • oninputイベント： 入力欄に文字を入力するたびに check() 関数が呼び出され、判定結果が即座に更新されます。
  • validity.valid プロパティ： 値が min=4 の条件を満たしていれば true となり、「valid」というメッセージが表示されます。
  • checkValidity() の出力： 判定結果（true / false）がコンソールにも出力されるため、開発者ツールで動作を確認できます。

このように、checkValidity() と validity オブジェクトを組み合わせれば、サーバーへ送信する前にクライアント側で手軽に入力値の妥当性を検証でき、ユーザー体験の向上につながります。

  1. HTML5 History APIに対応しているブラウザはどれ？主要ブラウザのサポート状況を解説

    HTML5 History APIは、ページを再読み込みすることなくブラウザの履歴やURLを操作できる便利な機能です。Ajaxを使ったシングルページアプリケーション（SPA）などで、URLを動的に変更しながら戻る・進むボタンにも対応できるため、多くのWebサイトで活用されています。かつての対応状況HTML5 History APIが登場した当初は、WebKit系ブラウザとFirefox 4が主な対応ブラウザでした。当時はまだ普及途上の技術だったため、利用できる環境が限られていました。現在の対応ブラウザしかし現在では、ほぼすべてのモダンブラウザがHTML5 History APIをサポートしてお

  2. HTML5のWeb Worker対応をブラウザで検出する方法【Modernizr活用】

    HTML5機能のブラウザ対応確認の基本HTML5では、Web Workerをはじめとする多くの新しい機能が追加されました。しかし、すべてのブラウザがこれらの機能に対応しているとは限りません。そのため、JavaScriptで機能の有無を事前に検出し、非対応のブラウザ向けに適切な代替処理を用意しておくことが重要です。Modernizrを使ったWeb Worker対応の検出機能検出には「Modernizr」というJavaScriptライブラリが便利です。Modernizrをページに読み込むと、Modernizr.webworkersのようなプロパティを参照するだけで、ブラウザがWeb Workerに