0

大きなフォームで jQuery Validate プラグインを使用しており、require_from_group メソッド (以前に投稿した後) を使用して、3 つのチェックボックスのグループから少なくとも 1 つがチェックされていることを確認しています。

ただし、他のルールが機能しなくなるという問題に遭遇しました。提案されたパッチを適用しましたが、それも正しく機能していないようです (上記の GitHub の問題で述べたように)。

したがって、この 3 つのチェックボックス フィールドのグループを検証する別の方法を見つける必要があります (フォームには検証を必要としないチェックボックス フィールドが他にもあるため、この 3 つのチェックボックスのグループを具体的にターゲットにする必要があることに注意してください)。どこから始めればよいかわかりません。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です（これにより、3つのチェックボックスすべてが必須になりますが、3つのうち少なくとも1つだけをチェックしたいです）：

$(".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"
  }
});

編集 1:申し訳ありませんが、各チェックボックスの name 属性が同じであってはならないことを追加する必要がありました。これらの名前は CMS の特定のカスタム フィールド名にマップされるため、それらがすべて同じであると、フォームが送信されたときにフィールドの値が正しく保存されません。これが、 jQuery Validate デモ ページの 2 番目の例に従わなかった理由でもあります。

4

3 に答える 3

2

試す

HTML

別のものを使用する必要はありませんname array attribute、それは次のように使用することができます

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

脚本

のvalidate Plugin

$('.my_form').validate( {
   errorLabelContainer: ".form_errors",
   wrapper: "li",
   rules: {
      "my_checkbox[]": {
          required: true,
          minlength: 1
   },
   messages: {
      'my_checkbox[]': "This field is required"          
   }
});

http://docs.jquery.com/Plugins/Validation/Reference#Fields_with_complex_names_.28brackets.2C_dots.29から

のsimple Jquery

var isChecked=false;
$('input.my_checkbox_group').each(function(){
   if($(this).is(':checked'))
   {
       isChecked=true;
   }
});
if(isChecked==false)
{
   alert("Please select a group");
}
于 2013-03-06T04:36:48.037 に答える
2

3 つのチェックボックスのうち少なくとも 1 つがオンになっていることを確認するカスタム メソッドを作成しました。

または属性を変更したり、HTML に新しいものを追加したりすることなく、ジョブを完了できます。(ただし、無効な HTML がいくつかありましたが、それを少しクリーンアップしました。)nameid

$.validator.addMethod("checkboxrule", function (value, element) {
    return ($('#my_checkbox_1').is(':checked') || $('#my_checkbox_2').is(':checked') || $('#my_checkbox_3').is(':checked'));
}, "Select at least one of these three");

動作デモ: http://jsfiddle.net/u4WM4/

groupsまた、3 つのメッセージを 1 つにまとめるオプションも使用しました。(代わりに 3 つのメッセージが必要な場合は、単純に削除できます。)

完全な jQuery:

$(document).ready(function () {

    $.validator.addMethod("checkboxrule", function (value, element) {
        return ($('#my_checkbox_1').is(':checked') || $('#my_checkbox_2').is(':checked') || $('#my_checkbox_3').is(':checked'))
    }, "Select at least one of these three");

    $('.my_form').validate({ 
        errorLabelContainer: ".form_errors",
        wrapper: "li",
        groups: {
            somename: "my_checkbox_1[] my_checkbox_2[] my_checkbox_3[]"
        },
        rules: {
            'my_checkbox_1[]': {
                checkboxrule: true
            },
            'my_checkbox_2[]': {
                checkboxrule: true
            },
            'my_checkbox_3[]': {
                checkboxrule: true
            }
        }
    });

});
于 2013-03-06T06:49:51.917 に答える
1

そのためには名前属性を変更する必要があると思います。チェックボックスごとに同じ名前を設定する必要があります。

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

JSコード

$(".my_form").validate({
  errorLabelContainer: ".form_errors",
  wrapper: "li",
  rules : {
        "my_checkbox[]" : {
            required : true,
            minlength : 1
        }
    },
    messages : {
        "my_checkbox[]" : {
            required : "must have checkbox selected",
            minlength : "atleast 1 checkbox should be checked"
        }
    }
});
于 2013-03-06T04:37:35.357 に答える