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

JavaScriptでHTML5フォームのバリデーションをオーバーライドする方法

HTML5では、required属性などを付けると、ブラウザが自動的に入力チェック（バリデーション）を実行します。しかし、特定の操作を行った際にはこの検証を無効にしたいケースもあります。そんなときは、JavaScriptを使ってクリックイベント発生時に該当要素から属性を削除することで、HTML5の検証をオーバーライドできます。

removeAttribute()メソッドとは

removeAttribute()は、対象の要素から指定した属性を削除するためのJavaScriptメソッドです。たとえば、テキスト入力フィールドからrequired属性を取り除けば、そのフィールドが空欄でもフォーム送信時の必須チェックエラーが発生しなくなります。

実装サンプルコード

以下の例では、ラジオボタンをクリックすると、名前（First Name）入力欄からrequired属性が削除され、HTML5の検証が無効になります。

<!DOCTYPE html>
<html>
   <body>
      <form>
         First Name: <input type="text" id="fname" value="Amit" required>
         <input type="radio" onclick="display('fname')"><br>
      </form>
      <script>
         function display(id) {
            document.getElementById(id).removeAttribute('required');
         }
      </script>
   </body>
</html>

コードの解説

このサンプルの動作は以下のとおりです。

  • テキスト入力欄には初期値としてvalue="Amit"とrequired属性が設定されています。
  • ラジオボタンがクリックされると、onclickイベントによってdisplay()関数が呼び出されます。
  • 関数内ではgetElementById()で対象の入力要素を取得し、removeAttribute('required')によって必須属性を削除します。
  • その結果、以降のフォーム送信時に入力欄が空でも、ブラウザによる必須チェックのエラーは表示されなくなります。

なお、一度削除した属性を再度有効化したい場合は、setAttribute('required', 'required')を使うことで属性を再設定できます。状況に応じて検証のオン・オフを切り替えたい場合に便利なテクニックです。

  1. Visual StudioでHTML5検証を追加・設定する方法

    HTML5の検証（バリデーション）機能を利用するには、Visual StudioにIntelliSenseおよび検証機能のサポートをインストールしておく必要があります。Visual Studio 2012では、HTML5が標準でサポートされています。実はVisual Studio 2010の時点でもIntelliSenseによる入力支援は提供されていましたが、VS 2012ではさらにHTML5対応のコードスニペットが追加され、マークアップを素早く効率的に記述できるようになりました。HTML5検証を有効にする手順以下の手順に従って設定を行いましょう。Visual Studio 2012を起動しま

  2. Visual StudioでHTML5検証機能を追加・設定する方法

    HTML5の検証（バリデーション）をVisual Studioで行うには、IntelliSenseおよび検証サポート機能を有効にしておく必要があります。HTML5はVisual Studio 2012以降で正式にサポートされており、適切な設定を行うことで、タグの入力ミスや構文エラーをリアルタイムにチェックできるようになります。Visual Studio 2010と2012の違いVisual Studio 2010でもHTML5向けのIntelliSenseサポートは提供されていましたが、コード補完の範囲が限定的でした。一方、Visual Studio 2012ではHTML5に対応したコードスニ