jQuery验证 - 选择至少3个20的字段

时间:2013-03-24 00:06:07

标签: jquery jquery-validate

您好我现在搜索了几个小时的解决方案。我有20个字段(下拉列表),答案为“是”和“否”。现在我要验证,用户必须对20个“是”中的3个说。这与20来说无关紧要。

例如20个下拉菜单中的一个......

<select name="dd1" id="dd1">
<option value="yes">Yes</option>
<option value="no" selected="selected">No</option>
</select>

有没有人有解决方案的想法?

对于验证,我使用例如以下格式:

 $(document).ready(function(){

    $("#register").validate({

        rules: {

            surname: {
                required: true,
                minlength: 3
            },

            messages: {
            surname: {
                required: "xxx",
                minlength: "xxx"
            },
            errorPlacement: function (error, element) {
             if ( element.is(":checkbox") )
             error.appendTo(element.parent("td").next("td"));
             else if ( element.is(":radio") )
             error.appendTo(element.parent("td").next("td"));
             else
             error.appendTo( element.parent());
            }

    });

  });

2 个答案:

答案 0 :(得分:2)

if ( $('select.my20drops[value="yes"]').length > 3 ) {
    // do something!
}

答案 1 :(得分:2)

修复@ adeneo的选择器......

$('select.mydrops option[value="yes"]:selected')

然后使用plugin's addMethod method,我创建了一个自定义规则。

工作演示:http://jsfiddle.net/UBhce/

$(document).ready(function () {

    $.validator.addMethod('customrule', function(value, element, param) {
        return ( $('select.mydrops option[value="yes"]:selected').length >= param ); 
    }, "please select 'yes' to at least {0} items");

    $('#myform').validate({ // initialize the plugin
        groups: {
            whatever: "dd1 dd2 dd3 dd4"  // grouping all messages into one
        }
    });

    $('.mydrops').each(function() { // apply rule to all selects at once
        $(this).rules('add', {
            customrule: 3  // using a parameter for number of required selects
        });
    });

});

我还为所有class="mydrops"元素添加了select,并确保所有idnames都是唯一的。

<select name="dd1" id="dd1" class="mydrops">
    <option value="yes">Yes</option>
    <option value="no" selected="selected">No</option>
</select>