チェックボックスの状態に応じてメールフォームの必須切替え

Posted on by

JavaScriptを使用して、チェックボックスの状態に応じてメールフォームの必須（required）属性を切り替える機能を実装する方法を説明します。このシナリオでは、ユーザーがチェックボックスをオンにするとメールフォームが必須になり、チェックボックスをオフにすると必須条件が解除されるようにします。また、メールフォームに文字が入力されている場合にも、自動的に必須条件を満たすようにします。

HTML

まず、HTMLを用意します。
メールアドレスの入力フィールドと、それを必須にするためのチェックボックスを含めます。

<form id="form">
  <label for="email">メールアドレス:</label>
  <input type="email" id="email" name="email">
  <div>
    <input type="checkbox" id="emailRequired" name="emailRequired">
    <label for="emailRequired">メールアドレスを必須にする</label>
  </div>
  <button type="submit">送信</button>
</form>

JavaScript

次に、JavaScriptを用意します。
このスクリプトは、チェックボックスの状態を監視し、
条件に応じてメールフォームのrequired属性を切り替えます。

document.addEventListener('DOMContentLoaded', function() {
  const emailInput = document.getElementById('email');
  const requiredCheckbox = document.getElementById('emailRequired');

  // チェックボックスの状態が変わった時のイベントハンドラを設定
  requiredCheckbox.addEventListener('change', function() {
    emailInput.required = this.checked;
  });

  // メールアドレス入力フィールドの入力が変わった時のイベントハンドラを設定
  emailInput.addEventListener('input', function() {
    // 入力がある場合、自動的に必須条件を満たすようにする
    if (this.value) {
      emailInput.required = true;
      requiredCheckbox.checked = true;
    }
  });
});

このコードでは、まずDOMContentLoadedイベントを使用して、ドキュメントが完全に読み込まれた後にスクリプトが実行されるようにしています。emailInputとrequiredCheckbox変数を使用して、メールアドレスの入力フィールドとチェックボックスを指定します。

requiredCheckboxのchangeイベントリスナーは、チェックボックスの状態が変わるたびにメールアドレス入力フィールドのrequired属性を切り替えます。チェックボックスがオンの場合はrequiredをtrueにし、オフの場合はfalseにします。

emailInputのinputイベントリスナーは、ユーザーがメールアドレスを入力した際に発火します。もしユーザーが何か文字を入力した場合、自動的にそのフィールドを必須にし、チェックボックスもオンにします。

これにより、ユーザーがメールアドレスを入力する際に、フォームが適切に反応し、必須条件の設定を動的に変更することができます。