2

jQuery Validate プラグインを使用して、3 つのチェックボックスのうち少なくとも 1 つがチェックされていることを確認するにはどうすればよいですか? これまでのところ、3 つのチェックボックスをすべて必須にすることが最善です (これは私が望んでいることではありません)。これを実現するためのコードを以下に示します。

jQuery Validate のデモ ページでこの例を使用してみましたが、チェックボックスの各フィールドに同じ名前を付ける必要があります。これらのフィールドは CMS から取得され、それぞれに異なる名前が必要なため、これを行うことができません。

ここでは他の多くのフィールドが検証されているため (この例をクリーンに保つために削除されています)、これが、限られた JS/jQuery の知識でフォームを検証できる唯一の方法であるため、これを jQuery 検証内に保持したいと考えています。これについてご協力いただきありがとうございます。

ここに私のHTMLがあります：

<form class="my_form" method="post" action="/" >

  <div><ul class="form_errors"></ul></div>

  <label><input class="my_checkbox_group" id="my_checkbox_1" name="my_checkbox_1[]" type="checkbox" value="Yes"> My checkbox 1</label>
  <label><input class="my_checkbox_group" id="my_checkbox_2" name="my_checkbox_2[]" type="checkbox" value="Yes"> My checkbox 2</label>
  <label><input class="my_checkbox_group" id="my_checkbox_3" name="my_checkbox_3[]" type="checkbox" value="Yes"> My checkbox 3</label>

  <input type="submit" value="Submit" />

</form>

ここに私のJSがあります：

$(".my_form").validate({
  errorLabelContainer: ".form_errors",
  wrapper: "li",
  rules: {
    'my_checkbox_1[]': { required: true },
    'my_checkbox_2[]': { required: true },
    'my_checkbox_3[]': { required: true }
  },
  messages: {
    'my_checkbox_1[]': "This field is required",
    'my_checkbox_2[]': "This field is required",
    'my_checkbox_3[]': "This field is required"
  }
});
4

2 に答える 2

7

ファイルrequire_from_groupに含まれるルールを使用しますadditional-methods.js。

rules: {
    'my_checkbox_1[]': {
        require_from_group: [1, ".my_checkbox_group"]
    }
}
  • 最初のパラメーターは、必要なアイテムの数です。

  • 2 番目のパラメーターは、classグループ内のすべての要素に割り当てられます。

  • また、groupsオプションを使用して 3 つのメッセージを 1 つに統合します。

新しいコード:

$(document).ready(function () {

    $(".my_form").validate({
        errorLabelContainer: ".form_errors",
        wrapper: "li",
        groups: {
            names: "my_checkbox_1[] my_checkbox_2[] my_checkbox_3[]"
        },
        rules: {
            'my_checkbox_1[]': {
                require_from_group: [1, ".my_checkbox_group"]
            },
            'my_checkbox_2[]': {
                require_from_group: [1, ".my_checkbox_group"]
            },
            'my_checkbox_3[]': {
                require_from_group: [1, ".my_checkbox_group"]
            }
        }
    });

});

実際のデモ: http://jsfiddle.net/ya7Px/

于 2013-02-14T20:21:23.280 に答える
2

additional-methods.jsにあるrequire_from_groupメソッドを使用し、クラス名を最初のパラメーターとし、2番目のパラメーターとして必要な番号を取ります

 <input class="productinfo" name="partnumber">
 <input class="productinfo" name="description">

...少なくとも1つが入力されていない限り、検証されます。

partnumber:  {require_from_group: [1,".productinfo"]},
description: {require_from_group: [1,".productinfo"]}

https://github.com/jzaefferer/jquery-validation/blob/master/additional-methods.js#L337

于 2013-02-14T20:12:35.250 に答える