0

我在大型表单上使用 jQuery Validate 插件，并且一直在使用 require_from_group 方法（在之前发布之后）以确保至少选中一组三个复选框中的一个。

但是，我遇到了一个问题，它会阻止其他规则起作用。我已经应用了一个建议的补丁，但这似乎也不能正常工作（如上述 GitHub 问题中所述）。

所以我需要找到另一种方法来验证这组三个复选框字段（请注意，我需要专门针对这组三个复选框，因为我在表单上有其他不需要验证的复选框字段），但我现在不知道从哪里开始。我想我需要在我的 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"
  }
});

编辑1：对不起，我应该添加每个复选框的名称属性不能相同。这些名称映射到 CMS 中的特定自定义字段名称，因此如果它们都相同，则在提交表单时字段中的值将无法正确保存。这也是我从不遵循jQuery Validate 演示页面上的第二个示例的原因。

4

3 回答 3

2

尝试

HTML

你不必使用 different 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

我编写了一个自定义方法来检查以确保三个复选框中的至少一个被勾选。

它无需修改您的任何属性name或id向 HTML 添加任何新内容即可完成工作。（但是，我清理了一些无效的 HTML。）

$.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将三条消息合二为一的选项。（如果你想要三条消息，你可以简单地删除它。）

完整的 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 回答