JavaScriptでrequired属性を動的に操作する方法10選

●JavaScriptでrequired属性を操作するメリット

HTMLフォームを作成する際、入力必須の項目にはrequired属性を指定することで、ユーザーに入力を促すことができます。

しかし、時にはJavaScriptを使ってrequired属性を動的に操作したいケースがあるのではないでしょうか。

ここではまず、そもそもrequired属性とは何なのか、そしてJavaScriptを使ってrequired属性を操作するメリットについて考えていきましょう。

○required属性とは

required属性は、HTML5で導入された比較的新しい属性の1つです。

この属性をフォームの入力要素に指定すると、その入力欄が必須項目となります。

ユーザーが値を入力せずにフォームを送信しようとすると、ブラウザ側で自動的にエラーメッセージが表示され、送信がブロックされるわけです。

コードで表すと次のようになります。

<input type="text" name="username" required>

このように、required属性を指定するだけで簡単に必須入力のバリデーションを実装できるのが大きな利点ですね。

ただ、HTMLだけでは表現できる動作に限界があります。そこで、JavaScriptの出番となるわけです。

○JavaScriptを使うことのメリット

JavaScriptを使ってrequired属性を操作するメリットは大きく分けて3つあります。

1つ目は、動的にrequired属性の有無を切り替えられること。

たとえば、あるチェックボックスにチェックが入ったら特定の入力欄を必須にしたい、といった場合にJavaScriptで制御できます。

2つ目は、エラーメッセージをカスタマイズできること。

required属性によるデフォルトのエラーメッセージは、ブラウザによって異なります。

JavaScriptを使えば、アプリケーションに合ったメッセージを表示できるのです。

3つ目は、複雑な条件のバリデーションを実装できること。

複数の入力欄の組み合わせによる動的なバリデーションをJavaScriptで記述することで、柔軟で強力な入力チェックが可能になります。

このようにJavaScriptを活用することで、required属性をより効果的に扱えるようになるわけです。

必須入力のバリデーションを実装する際は、HTMLとJavaScriptをうまく組み合わせることが重要だと言えるでしょう。

●required属性の基本的な使い方

JavaScriptを使ってrequired属性を動的に操作する前に、そもそもrequired属性の基本的な使い方を押さえておく必要がありますよね。

ここでは、HTMLとJavaScriptそれぞれでのrequired属性の設定方法を具体的なコード例とともに見ていきましょう。

○サンプルコード1：HTMLでrequired属性を設定する

まずは、HTMLでrequired属性を設定する方法から確認していきます。

下記のように、入力フィールドにrequired属性を追加するだけでOKです。

<form>
  <label for="username">ユーザー名：</label>
  <input type="text" id="username" name="username" required>

  <label for="email">メールアドレス：</label>
  <input type="email" id="email" name="email" required>

  <button type="submit">送信</button>
</form>

このように、required属性を指定した入力フィールドは必須項目となります。

ユーザーが値を入力せずにフォームを送信しようとすると、ブラウザ側でエラーメッセージが表示され、送信がブロックされます。

ただし、この方法ではrequired属性の有無を動的に切り替えることはできません。

そこで、次はJavaScriptを使った方法を見てみましょう。

○サンプルコード2：JavaScriptでrequired属性を動的に追加・削除する

JavaScriptを使えば、required属性を動的に追加・削除することができます。

<form>
  <label for="username">ユーザー名：</label>
  <input type="text" id="username" name="username">

  <label for="email">メールアドレス：</label>
  <input type="email" id="email" name="email">

  <button type="submit">送信</button>
</form>

<script>
  const usernameInput = document.getElementById('username');
  const emailInput = document.getElementById('email');

  // required属性を追加
  usernameInput.required = true;
  emailInput.required = true;

  // required属性を削除
  // usernameInput.required = false;
  // emailInput.required = false;
</script>

ここでは、JavaScriptを使ってusernameInputとemailInputという2つの入力フィールドを取得しています。

そして、それぞれのrequiredプロパティをtrueに設定することで、required属性を動的に追加しています。

逆に、requiredプロパティをfalseに設定すれば、required属性を削除することもできます（コード中ではコメントアウトしています）。

このように、JavaScriptを使えばrequired属性の有無を動的に制御できるようになります。

これを応用すれば、特定の条件に応じてrequired属性を付けたり外したりといった柔軟な処理が実現できるわけです。

続いては、required属性のエラーメッセージをカスタマイズする方法について解説していきたいと思います。

デフォルトのエラーメッセージでは物足りない場合に、JavaScriptを使ってメッセージの内容や表示位置を調整する方法を見ていきましょう。

●エラーメッセージをカスタマイズする方法

フォームのバリデーションを実装する際、入力エラーが発生した場合のメッセージは非常に重要な要素ですよね。

デフォルトのエラーメッセージでは、ユーザーに適切な情報を伝えられない場合があります。

そこで、JavaScriptを使ってエラーメッセージをカスタマイズする方法を見ていきましょう。

○サンプルコード3：required属性のエラーメッセージを変更する

まずは、required属性によるエラーメッセージを変更する方法から解説します。

<form>
  <label for="username">ユーザー名：</label>
  <input type="text" id="username" name="username" required>

  <button type="submit">送信</button>
</form>

<script>
  const form = document.querySelector('form');
  const usernameInput = document.getElementById('username');

  form.addEventListener('submit', function(event) {
    if (!usernameInput.validity.valid) {
      event.preventDefault();
      usernameInput.setCustomValidity('ユーザー名は必須です。入力をお願いします。');
    }
  });

  usernameInput.addEventListener('input', function() {
    usernameInput.setCustomValidity('');
  });
</script>

ここでは、フォームの送信時にusernameInputの入力チェックを行っています。

validity.validプロパティを使って、入力値が有効かどうかを判定しています。

もし無効な場合（required属性を満たしていない場合）、デフォルトの送信動作をキャンセルし、setCustomValidity()メソッドを使ってカスタムエラーメッセージを設定しています。

また、ユーザーが入力フィールドに値を入力し始めたら、inputイベントが発生します。

このタイミングでエラーメッセージをクリアするために、再度setCustomValidity()メソッドを呼び出して空文字を設定しています。

このようにすることで、required属性のエラーメッセージを自由にカスタマイズできるようになります。

ユーザーに分かりやすく、アプリケーションに合ったメッセージを表示できるわけです。

○サンプルコード4：エラーメッセージの表示位置を調整する

次に、エラーメッセージの表示位置を調整する方法を見ていきましょう。

デフォルトでは、ブラウザごとに異なる位置にエラーメッセージが表示されます。

これを統一し、入力フィールドの近くにメッセージを表示するようにしてみましょう。

<style>
  .error-message {
    color: red;
    font-size: 0.8em;
    margin-top: 4px;
  }
</style>

<form>
  <label for="username">ユーザー名：</label>
  <input type="text" id="username" name="username" required>
  <div class="error-message"></div>

  <button type="submit">送信</button>
</form>

<script>
  const form = document.querySelector('form');
  const usernameInput = document.getElementById('username');
  const errorMessage = document.querySelector('.error-message');

  form.addEventListener('submit', function(event) {
    if (!usernameInput.validity.valid) {
      event.preventDefault();
      showErrorMessage('ユーザー名は必須です。入力をお願いします。');
    }
  });

  usernameInput.addEventListener('input', function() {
    hideErrorMessage();
  });

  function showErrorMessage(message) {
    errorMessage.textContent = message;
  }

  function hideErrorMessage() {
    errorMessage.textContent = '';
  }
</script>

ここでは、まず<style>タグ内でエラーメッセージ用のCSSを定義しています。

.error-messageクラスを持つ要素に対して、文字色や文字サイズ、マージンを指定しています。

次に、usernameInputの直下に<div class="error-message"></div>を追加しています。

ここにエラーメッセージを表示するための要素を用意しているわけです。

JavaScriptコードでは、showErrorMessage()関数とhideErrorMessage()関数を定義しています。

これらの関数は、それぞれエラーメッセージの表示と非表示を行います。

具体的には、.error-message要素のtextContentプロパティを操作して、メッセージの内容を設定したり空にしたりしています。

フォームの送信時やユーザーの入力時には、これらの関数を呼び出してエラーメッセージの表示・非表示を切り替えています。

●複雑な条件分岐に対応する

先ほどまでは、JavaScriptを使ってrequired属性を動的に操作する基本的な方法やエラーメッセージのカスタマイズ方法について解説してきました。

しかし、実際の業務では、もう少し複雑な条件分岐が必要になるケースも多いのではないでしょうか。

ここからは、そんな場面でもrequired属性を柔軟に制御できるテクニックを見ていきたいと思います。

○サンプルコード5：特定の条件下でのみrequiredを有効にする

まずは、特定の条件を満たす場合にのみrequired属性を有効にする方法から見ていきましょう。

たとえば、あるチェックボックスがオンの時だけ、特定の入力フィールドを必須にしたいといったケースですね。

<form>
  <input type="checkbox" id="terms" name="terms">
  <label for="terms">利用規約に同意する</label>

  <label for="username">ユーザー名：</label>
  <input type="text" id="username" name="username">

  <button type="submit">送信</button>
</form>

<script>
  const form = document.querySelector('form');
  const termsCheckbox = document.getElementById('terms');
  const usernameInput = document.getElementById('username');

  termsCheckbox.addEventListener('change', function() {
    if (this.checked) {
      usernameInput.required = true;
    } else {
      usernameInput.required = false;
    }
  });

  form.addEventListener('submit', function(event) {
    if (!form.checkValidity()) {
      event.preventDefault();
      alert('入力内容に誤りがあります。');
    }
  });
</script>

ここでは、「利用規約に同意する」というチェックボックス（termsCheckbox）の状態に応じて、ユーザー名の入力フィールド（usernameInput）のrequired属性を切り替えています。

具体的には、changeイベントリスナーを使ってチェックボックスの状態変化を監視しています。

チェックボックスがオンになった場合（this.checkedがtrue）、usernameInput.requiredをtrueに設定してrequired属性を有効化します。

逆にオフの場合はfalseに設定して無効化します。

また、フォームの送信時にはcheckValidity()メソッドを使って全体の入力チェックを行っています。

もし無効な入力がある場合は、デフォルトの送信動作をキャンセルし、アラートでエラーメッセージを表示するようにしています。

このように、JavaScriptを使えば特定の条件に応じてrequired属性の有無を切り替えることができます。

条件分岐を駆使することで、柔軟なバリデーション制御が可能になるわけです。

○サンプルコード6：複数の項目に対して一括でrequiredを設定する

次に、複数の入力項目に対して一括でrequired属性を設定する方法を見ていきましょう。

たとえば、ある特定のボタンをクリックしたら、複数の入力フィールドを一斉に必須項目にしたいといったケースですね。

<form>
  <label for="username">ユーザー名：</label>
  <input type="text" id="username" name="username">

  <label for="email">メールアドレス：</label>
  <input type="email" id="email" name="email">

  <label for="password">パスワード：</label>
  <input type="password" id="password" name="password">

  <button type="button" id="requireFields">必須項目にする</button>
  <button type="submit">送信</button>
</form>

<script>
  const form = document.querySelector('form');
  const requireFieldsButton = document.getElementById('requireFields');
  const inputFields = form.querySelectorAll('input');

  requireFieldsButton.addEventListener('click', function() {
    inputFields.forEach(function(input) {
      input.required = true;
    });
    alert('すべての項目が必須になりました。');
  });

  form.addEventListener('submit', function(event) {
    if (!form.checkValidity()) {
      event.preventDefault();
      alert('入力内容に誤りがあります。');
    }
  });
</script>

ここでは、「必須項目にする」というボタン（requireFieldsButton）をクリックすると、フォーム内のすべての入力フィールドに対してrequired属性が設定されるようになっています。

具体的には、querySelectorAll()メソッドを使ってフォーム内の全input要素を取得し、それをinputFields変数に格納しています。

そして、ボタンのクリックイベントリスナー内で、forEach()メソッドを使って各入力フィールドに対してrequiredプロパティをtrueに設定しています。

これにより、ボタンをクリックした時点ですべての入力フィールドが必須項目になります。

ユーザーに対してはアラートで通知するようにしていますね。

また、フォームの送信時の処理は先ほどと同様です。

checkValidity()メソッドで全体の入力チェックを行い、無効な入力がある場合はエラーメッセージを表示するようにしています。

●jQueryを使ったrequiredの操作

ここまで、JavaScriptを使ってrequired属性を動的に操作する様々な方法について解説してきましたが、実はjQueryを使えばもっと簡単にrequiredの制御ができるんです。

jQueryは、JavaScriptの人気ライブラリの1つで、セレクターやメソッドを駆使することで、DOMの操作やイベント処理を直感的に行えるようになります。

ここからは、そんなjQueryの力を借りてrequired属性をスマートに扱う方法を見ていきましょう。

○jQueryとは

jQueryについて簡単に説明しておきますね。jQueryは、JavaScriptのコードをシンプルに記述できるようにしてくれるライブラリです。

セレクターと呼ばれる記法を使って、HTMLの要素を簡単に取得したり操作したりできるのが大きな特徴ですね。

また、イベント処理やアニメーションなども手軽に実装できるので、Webサイトの動的な表現に欠かせない存在となっています。

jQueryを使うには、まずjQueryのライブラリをHTMLに読み込む必要があります。CDNを利用するのが一般的ですね。

HTMLのヘッダー部分に次のような<script>タグを追加しましょう。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

これで、jQueryの機能を使えるようになります。

jQueryを使ったコードは、$()関数を起点に記述していきます。

$(セレクター)という形で要素を取得し、その後にメソッドを繋げていくことで、様々な処理を行うことができるわけです。

○サンプルコード7：jQueryでrequired属性を追加・削除する

それでは、jQueryを使ってrequired属性を追加・削除する方法を見ていきましょう。

先ほどのサンプルコードをjQueryで書き換えてみます。

<form>
  <label for="username">ユーザー名：</label>
  <input type="text" id="username" name="username">

  <button type="button" id="addRequired">required属性を追加</button>
  <button type="button" id="removeRequired">required属性を削除</button>

  <button type="submit">送信</button>
</form>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(function() {
    $('#addRequired').on('click', function() {
      $('#username').prop('required', true);
      alert('ユーザー名が必須項目になりました。');
    });

    $('#removeRequired').on('click', function() {
      $('#username').prop('required', false);
      alert('ユーザー名の必須が解除されました。');
    });

    $('form').on('submit', function(event) {
      if (!$(this)[0].checkValidity()) {
        event.preventDefault();
        alert('入力内容に誤りがあります。');
      }
    });
  });
</script>

コードを見ていきましょう。

まず、$(function() { ... })という記述があります。

これは、HTMLのDOMが完全に読み込まれた後に、その中の処理を実行するという意味です。

jQueryを使う際によく登場するイディオムですね。

次に、$('#addRequired').on('click', function() { ... })という部分では、id属性がaddRequiredの要素（ここではボタン）がクリックされた時の処理を定義しています。

$('#username').prop('required', true)で、id属性がusernameの要素（入力フィールド）のrequired属性をtrueに設定しています。

prop()メソッドは、要素のプロパティを取得・設定するためのメソッドです。

同様に、$('#removeRequired').on('click', function() { ... })では、removeRequiredボタンがクリックされた時に、$('#username').prop('required', false)でrequired属性をfalseに設定しています。

最後に、$('form').on('submit', function(event) { ... })では、フォームが送信された時の処理を定義しています。

$(this)[0].checkValidity()で、フォームの入力内容が妥当かどうかを確認し、妥当でない場合はevent.preventDefault()でデフォルトの送信動作をキャンセルしています。

●よくあるエラーと対処法

JavaScriptを使ってrequired属性を動的に操作する方法について、これまでいろいろと解説してきました。

しかし、実際にコードを書いていると、思わぬエラーに遭遇することがありますよね。

特に、required属性まわりのエラーは意外と多いんです。

ここからは、そんなrequired属性を使っていて起きがちなエラーとその対処法について、具体的に見ていきましょう。

○エラー1：required属性が効かない場合の原因と対処法

まず、required属性を設定しているのに、その効果が現れないというエラーについて考えてみます。こんな経験、ありませんか？

一見、正しくrequired属性を指定しているように見えるのに、いざフォームを送信してみると、空欄のままでも送信できてしまう…。

こういうケースの原因は、主に2つ考えられます。

1つ目は、そもそもrequired属性が正しく設定できていないというパターンです。

たとえば、required="true"のように属性値を指定していたり、required属性の綴りを間違えていたりすると、required属性が効きません。

正しくは、単にrequiredと属性名だけを指定すればOKです。

2つ目は、JavaScriptの処理によってrequired属性が上書きされているパターンです。

たとえば、こんなコードを書いていませんか？

document.getElementById('username').required = false;

このように、JavaScriptで明示的にrequiredプロパティをfalseに設定してしまうと、HTMLで指定していたrequired属性が無効になってしまいます。

これらのエラーを防ぐためには、まずはHTMLでrequired属性を正しく設定することが大切です。

そして、JavaScriptでrequired属性を操作する際は、意図しない上書きが起きていないか注意しましょう。

○エラー2：ラジオボタンやチェックボックスでrequiredが正しく機能しない場合の対処法

次に、ラジオボタンやチェックボックスにrequired属性を設定しても、正しく機能しないケースについて見ていきます。

たとえば、こんなHTMLコードがあったとします。

<form>
  <input type="radio" name="gender" value="male" required>男性
  <input type="radio" name="gender" value="female" required>女性
  <button type="submit">送信</button>
</form>

ここでは、ラジオボタンにrequired属性を指定していますが、実はこれではうまくいきません。

ラジオボタンの場合、required属性は同じname属性を持つグループの中で、少なくとも1つが選択されていれば満たされたことになります。

つまり、各ラジオボタンにrequired属性を指定するのではなく、グループ単位で指定する必要があるのです。

正しくは、以下のようにname属性を持ついずれかのラジオボタンにrequired属性を指定します。

<form>
  <input type="radio" name="gender" value="male" required>男性
  <input type="radio" name="gender" value="female">女性
  <button type="submit">送信</button>
</form>

同様に、チェックボックスの場合も、グループ単位でrequired属性を指定する必要があります。

これらのエラーを避けるためには、ラジオボタンやチェックボックスの仕組みをしっかり理解することが重要ですね。

HTMLの基本に立ち返って、各フォーム部品の特性を把握しておくことが大切です。

○エラー3：selectタグでrequiredが効かない場合の対処法

最後に、selectタグでrequiredが効かないケースを見てみましょう。

こんなHTMLコードがあるとします。

<form>
  <select name="fruit" required>
    <option value="">選択してください</option>
    <option value="apple">りんご</option>
    <option value="banana">バナナ</option>
    <option value="orange">オレンジ</option>
  </select>
  <button type="submit">送信</button>
</form>

ここでは、selectタグにrequired属性を指定していますが、実はこれだけではうまくいきません。

selectタグの場合、required属性を満たすためには、value属性が空でないoptionタグが選択されている必要があります。

上記のコードでは、最初のoptionタグのvalue属性が空になっています。

これが選択された状態でフォームを送信すると、required属性が効かずに送信されてしまうのです。

これを防ぐには、次のように、最初のoptionタグをdisabled属性付きで用意するのが一般的です。

<form>
  <select name="fruit" required>
    <option value="" disabled selected>選択してください</option>
    <option value="apple">りんご</option>
    <option value="banana">バナナ</option>
    <option value="orange">オレンジ</option>
  </select>
  <button type="submit">送信</button>
</form>

disabled属性を指定することで、そのoptionタグは選択できなくなります。

また、selected属性を指定することで、初期状態で選択されている状態になります。

このようにすれば、ユーザーは必ずvalue属性が空でないoptionタグを選択することになるので、required属性が正しく機能するようになります。

selectタグまわりのエラーを防ぐためには、各optionタグのvalue属性の設定に気をつけることが肝心ですね。

●required属性の応用例

JavaScriptを使ったrequired属性の操作方法について、基本的な使い方からよくあるエラーの対処法まで幅広く見てきましたが、ここからはもう少し発展的な使い方について考えていきましょう。

実際の業務では、単純にrequired属性を設定するだけでは物足りないケースも多いはずです。

そこで、required属性をさらに活用した、実践的なテクニックをいくつか紹介したいと思います。

○サンプルコード8：パスワードの入力チェックにrequiredを活用する

まずは、パスワードの入力チェックにrequired属性を活用する方法から見ていきましょう。

たとえば、新規登録フォームでパスワードを設定する際、「パスワード」と「パスワード（確認用）」の2つの入力フィールドを用意することがよくありますよね。

この時、両方の入力が一致している場合のみ、送信ボタンを活性化したいというニーズがあるかもしれません。

そんな場合は、このようなコードを書くことで実現できます。

<form>
  <label for="password">パスワード：</label>
  <input type="password" id="password" name="password" required>

  <label for="confirmPassword">パスワード（確認用）：</label>
  <input type="password" id="confirmPassword" name="confirmPassword" required>

  <button type="submit" id="submitButton" disabled>送信</button>
</form>

<script>
  const passwordInput = document.getElementById('password');
  const confirmPasswordInput = document.getElementById('confirmPassword');
  const submitButton = document.getElementById('submitButton');

  function checkPasswordMatch() {
    if (passwordInput.value === confirmPasswordInput.value) {
      submitButton.disabled = false;
    } else {
      submitButton.disabled = true;
    }
  }

  passwordInput.addEventListener('input', checkPasswordMatch);
  confirmPasswordInput.addEventListener('input', checkPasswordMatch);
</script>

ここでは、「パスワード」と「パスワード（確認用）」の2つの入力フィールドにrequired属性を設定しています。

そして、送信ボタンには初期状態でdisabled属性を付けて非活性にしておきます。

次に、JavaScriptではcheckPasswordMatch()関数を定義しています。

この関数は、2つのパスワード入力の値が一致しているかを確認し、一致している場合は送信ボタンのdisabled属性を外して活性化、一致していない場合はdisabled属性を付けて非活性化します。

そして、両方のパスワード入力フィールドに対してinputイベントリスナーを設定し、入力があるたびにcheckPasswordMatch()関数を呼び出すようにしています。

このようにすることで、ユーザーが「パスワード」と「パスワード（確認用）」に同じ値を入力しないと送信ボタンが押せないようになります。

パスワードの入力チェックにrequired属性とJavaScriptを組み合わせることで、より堅牢なバリデーションが実現できるわけです。

○サンプルコード9：フォームの送信ボタンの活性/非活性をrequiredで制御する

続いて、フォームの送信ボタンの活性/非活性をrequired属性で制御する方法を見ていきましょう。

先ほどのサンプルコードでも、送信ボタンのdisabled属性を操作していましたが、ここではもう少し汎用的なアプローチを取ってみます。

具体的には、フォーム内のすべての必須項目が入力されている場合のみ、送信ボタンを活性化するようにしてみましょう。

<form>
  <label for="username">ユーザー名：</label>
  <input type="text" id="username" name="username" required>

  <label for="email">メールアドレス：</label>
  <input type="email" id="email" name="email" required>

  <button type="submit" id="submitButton" disabled>送信</button>
</form>

<script>
  const form = document.querySelector('form');
  const submitButton = document.getElementById('submitButton');

  function checkFormValidity() {
    if (form.checkValidity()) {
      submitButton.disabled = false;
    } else {
      submitButton.disabled = true;
    }
  }

  form.addEventListener('input', checkFormValidity);
  form.addEventListener('change', checkFormValidity);
</script>

ここでは、ユーザー名とメールアドレスの2つの入力フィールドにrequired属性を設定しています。

そして、送信ボタンには初期状態でdisabled属性を付けて非活性にしておきます。

JavaScriptでは、checkFormValidity()関数を定義しています。

この関数では、form.checkValidity()を使ってフォーム全体の妥当性を確認しています。

フォームが妥当な場合（すべての必須項目が入力されている場合）は送信ボタンを活性化し、そうでない場合は非活性化します。

そして、フォーム要素に対してinputイベントとchangeイベントのリスナーを設定し、入力やチェックボックスの状態変化があるたびにcheckFormValidity()関数を呼び出すようにしています。

このようにすることで、フォーム内のすべての必須項目が入力されるまで送信ボタンが押せないようになります。

required属性とJavaScriptを使って、フォームの送信制御を動的に行えるわけです。

○サンプルコード10：required属性とパターン属性を組み合わせた入力チェック

最後に、required属性とパターン属性を組み合わせた入力チェックの方法を見ていきましょう。

パターン属性は、正規表現を使って入力内容のフォーマットをチェックするための属性です。

これとrequired属性を一緒に使うことで、より詳細な入力バリデーションが可能になります。

たとえば、このようなコードを書くことで、電話番号の入力フォーマットをチェックできます。

<form>
  <label for="phone">電話番号：</label>
  <input type="tel" id="phone" name="phone" required pattern="0\d{1,4}-\d{1,4}-\d{4}">

  <button type="submit">送信</button>
</form>

<script>
  const phoneInput = document.getElementById('phone');

  phoneInput.addEventListener('invalid', function(event) {
    if (!event.target.validity.valid) {
      event.target.setCustomValidity('電話番号はXXXX-XXXX-XXXXの形式で入力してください。');
    }
  });

  phoneInput.addEventListener('input', function(event) {
    event.target.setCustomValidity('');
  });
</script>

ここでは、電話番号の入力フィールドに対して、required属性とパターン属性を設定しています。

パターン属性の値には、0\d{1,4}-\d{1,4}-\d{4}という正規表現を指定しています。

これは、「0から始まる1～4桁の数字、ハイフン、1～4桁の数字、ハイフン、4桁の数字」という形式にマッチします。

JavaScriptでは、入力フィールドのinvalidイベントリスナーを設定しています。

このイベントは、入力内容がパターン属性の正規表現にマッチしない場合に発生します。

そのような場合、setCustomValidity()メソッドを使ってカスタムのエラーメッセージを設定しています。

また、inputイベントリスナーも設定しています。

これは、ユーザーが入力し直したときにエラーメッセージをクリアするためです。

まとめ

JavaScriptでrequired属性を動的に操作する方法について、基本から応用までたっぷりと解説してきましたが、いかがでしたでしょうか。

HTMLとJavaScriptを組み合わせることで、シンプルなrequired属性が実に多彩な表情を見せてくれることが分かったのではないでしょうか。

エラーメッセージのカスタマイズ、複雑な条件分岐への対応、jQueryを使った記述の簡略化など、実践的なテクニックが満載だったと思います。

特に、パスワードの一致チェックやフォームの送信制御、正規表現を使った入力フォーマットのチェックなどは、実際の業務でもすぐに役立つはずです。

大切なのは、JavaScriptの力を最大限に引き出すことです。

HTMLとJavaScriptを自在に操ることができれば、required属性だけでなく、フォーム全体のバリデーションを思いのままにコントロールできるようになるでしょう。

今回紹介したサンプルコードを参考に、皆さんも思い思いのフォームバリデーションを実装してみてくださいね。

そして、JavaScriptの可能性をどんどん追求していってください。