确保选中40多个单选按钮中的至少一个

时间:2013-02-18 03:04:30

标签: jquery jquery-validate

我正在使用jquery.validate表单表单验证。问题是表单上有大约40个无线电输入,s1_AMs1_PMs2_AMs2_PM,每个输入大约有10个radio输入。必须检查四个选项中的至少一个,但不是全部四个。如果我将class="required"放在代码中,那就不正确,因为它需要所有四个选项。我该如何解决这个问题?

理想情况下,id就像保持验证一样,但如果收音机是空的,则添加警报。

jQuery

jQuery.validator.messages.required = "";
$("#enroll").validate({
invalidHandler: function(e, validator) {
    var errors = validator.numberOfInvalids();
    if (errors) {
        var message = errors == 1
            ? 'You missed 1 required field'
            : 'You missed ' + errors + ' required fields';
        $("div.Error span").html(message);
        $("div.Error").show();
    } else {
        $("div.Error").hide();
    }
}
});

无线电是动态的btw:

if($row['s1_AM_fill'] < $row['s1_AM_cap']) {
   $s1_AM .= '<input type="radio" name="s1_AM" id="s1_AM_'.$id.'" value="'.$id.'" />;
}

另外三个,适用于s1_PMs2_AMs2_PM

这是我做的,除了一旦警报开始,它就不会停止

$('#submit').click(function () {$("ul.courses").each(function(){
  $(this).find("input[type=radio]").each(function(){
    alert("You must select at least 1 available course");
});
return false;
});

1 个答案:

答案 0 :(得分:1)

您不应该使用额外的submitclick处理程序函数,这些函数只会有可能干扰插件的内置事件处理程序。

您只需使用plugin's built-in addMethod() method创建新规则即可。像这样......

jQuery.validator.addMethod('customrule', function() {
    return ($("input[name='s1_AM']:checked").val() || $("input[name='s1_PM']:checked").val() || $("input[name='s2_AM']:checked").val() || $("input[name='s2_PM']:checked").val());
}, 'Please select from at least one group' );

新规则会检查是否至少使用了四个radio组中的一个。该规则适用如下......

$(document).ready(function() {

    $('#enroll').validate({ // initialize the plugin
        rules: {
            's1_AM': {
                customrule: true
            },
            's1_PM': {
                customrule: true
            },
            's2_AM': {
                customrule: true
            },
            's2_PM': {
                customrule: true
            }
        },
        groups: { // use this option to consolidate the four messages into one
            groupname: "s1_AM s1_PM s2_AM s2_PM"
        }
    });

});

工作演示:http://jsfiddle.net/93jTZ/

您需要根据自己项目的规格调整错误放置功能。<​​/ p>

其他选项:http://docs.jquery.com/Plugins/Validation/validate#toptions