确保使用jQuery Validate选中三个复选框中的至少一个 [英] Ensure at least one from a group of three checkboxes is checked using jQuery Validate

问题描述

我正在以较大的形式使用jQuery Validate插件，并且一直在使用require_from_group方法(

I'm using the jQuery Validate plugin on a large form, and have been using the require_from_group method (after posting previously) to ensure at least one from a group of three checkboxes is checked.

但是，我已经遇到了问题，停止其他规则.我已经应用了建议的补丁，但是似乎也无法正常工作(如上述GitHub问题中所述).

However, I've ran into an issue with this where it stops other rules from working. I've applied a suggested patch, but that doesn't seem to work correctly either (as mentioned in the above GitHub issue).

因此，我需要找到另一种方法来验证这组三个复选框字段(请注意，我需要专门针对这组三个复选框，因为我在表单上还有其他不需要验证的复选框字段)，但是我不确定现在从哪里开始.我在想我需要在jQuery验证代码中添加某种自定义规则，但是我不确定现在从何处开始，因此不胜感激.

So I need to find another way to validate this group of three checkbox fields (note that I need to specifically target this group of three checkboes, as I have other checkbox fields on the form that don't require validating), but I'm not sure where to start with this now. I'm thinking I need to add some sort of custom rule into my jQuery validate code, but I'm not sure where to start with this now so would appreciate some advice, thanks.

这是我的起始HTML(该问题的基本要点):

Here's my starting HTML (stripped to bare essentials for this question):

<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(这使所有三个复选框成为必需，但是我只希望检查三个中的至少一个):

Here's my starting JS (this makes all three of the checkboxes mandatory, but I only want at least one from three to be checked):

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

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

Edit 1: Sorry, I should have added that the name attributes of each checkbox can't be the same. These names map to specific custom field names in the CMS, so if they were all the same, the values in the fields wouldn't be saved correctly when the form was submitted. This is also the reason why I never followed the second example on the jQuery Validate demo page.

推荐答案

我写了一种自定义方法，该方法检查以确保至少选中了三个复选框中的一个.

I wrote a custom method that checks to make sure at least one of the three checkboxes is ticked.

它可以完成工作，而无需修改任何name或id属性，或向HTML添加任何新内容. (但是，您清除了一些无效的HTML.)

It gets the job done without modifying any of your name or id attributes, or adding anything new to the HTML. (However, you had some invalid HTML that I cleaned up a bit.)

$.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/

Working DEMO: http://jsfiddle.net/u4WM4/

我还使用了groups选项将这三个消息合为一体. (如果您要发送三则消息，则可以将其删除.)

I also used the groups option to put the three messages into one. (You can simply remove it if you want three messages instead.)

完整的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
            }
        }
    });

});

这篇关于确保使用jQuery Validate选中三个复选框中的至少一个的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！