jQuery Validationプラグインを使わずにラジオボタングループのバリデーションを行う方法

2024-04-08

jQuery Validationプラグインを使用したラジオボタングループのバリデーション

ライブラリの準備

以下のライブラリが必要です。

jQuery
jQuery Validationプラグイン

これらのライブラリをCDNから読み込みます。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js"></script>

バリデーションの設定

以下のコードのように、required 属性と group 属性を使って、ラジオボタングループのバリデーションを設定します。

<form id="my-form">
  <label for="gender">性別:</label>
  <input type="radio" id="male" name="gender" value="male" required group="gender">
  <label for="male">男性</label>
  <input type="radio" id="female" name="gender" value="female" required group="gender">
  <label for="female">女性</label>
  <button type="submit">送信</button>
</form>

required 属性は、ラジオボタングループのいずれかのボタンを選択することを必須にします。group 属性は、どのボタンがグループに属しているかを指定します。

バリデーションメッセージの設定

以下のコードのように、messages オプションを使って、バリデーションエラー時のメッセージを設定できます。

$(document).ready(function() {
  $("#my-form").validate({
    messages: {
      gender: {
        required: "性別を選択してください",
      },
    },
  });
});

その他のオプション

jQuery Validationプラグインには、さまざまなオプションがあります。詳細は公式ドキュメント: https://jqueryvalidation.org/ を参照してください。

errorClass: エラーメッセージのクラス名
errorElement: エラーメッセージの要素

まとめ

jQuery Validationプラグインを使えば、ラジオボタングループのバリデーションを簡単に実装できます。上記の解説を参考に、ぜひ試してみてください。

補足

上記のコードは基本的な例です。必要に応じて、さまざまなオプションを設定できます。
バリデーションエラー時の処理は、errorPlacement オプションなどを利用して、自由にカスタマイズできます。

<form id="my-form">
  <label for="gender">性別:</label>
  <input type="radio" id="male" name="gender" value="male" required group="gender">
  <label for="male">男性</label>
  <input type="radio" id="female" name="gender" value="female" required group="gender">
  <label for="female">女性</label>
  <button type="submit">送信</button>
</form>

JavaScript

$(document).ready(function() {
  $("#my-form").validate({
    messages: {
      gender: {
        required: "性別を選択してください",
      },
    },
  });
});

このコードは、上記の解説に基づいて作成したサンプルコードです。このコードを実行すると、性別を選択していない場合は、"性別を選択してください"というエラーメッセージが表示されます。

エラーメッセージのスタイルを変更する
バリデーションエラー時に、送信ボタンを無効にする

これらのサンプルコードは、以下のサイトで確認できます。

jQuery Validationプラグイン以外でのラジオボタングループのバリデーション方法

JavaScriptによるバリデーション

以下のコードのように、JavaScriptを使ってバリデーションを行うことができます。

function validateGender() {
  const genderRadios = document.querySelectorAll('input[type="radio"][name="gender"]');
  let selected = false;
  for (const radio of genderRadios) {
    if (radio.checked) {
      selected = true;
      break;
    }
  }
  if (!selected) {
    alert("性別を選択してください");
    return false;
  }
  return true;
}

document.getElementById("my-form").addEventListener("submit", function(event) {
  if (!validateGender()) {
    event.preventDefault();
  }
});

HTML5のバリデーション

HTML5には、フォーム入力のバリデーション機能が標準搭載されています。以下のコードのように、required 属性を使って、ラジオボタングループのバリデーションを設定できます。

<form id="my-form">
  <label for="gender">性別:</label>
  <input type="radio" id="male" name="gender" value="male" required>
  <label for="male">男性</label>
  <input type="radio" id="female" name="gender" value="female" required>
  <label for="female">女性</label>
  <button type="submit">送信</button>
</form>