Jquery验证多个复选框设置错误放置

时间:2013-06-04 09:33:44

标签: javascript jquery jquery-validate

我有多套复选框。

如何将错误消息放在每组复选框的末尾。

此代码实现将消息放在第一个元素

之后

The fiddle

<form id="myForm" action="">

<input type="checkbox" id="check0" name="check0" class="chkgroup"/>
Set 1 check 1?
<br />
<input type="checkbox" id="check1" name="check1" class="chkgroup"/>
Set 1 check 2?
<br />
 <input type="checkbox" id="check2" name="check2" class="chkgroup"/>
Set 1 check 3?
<br />
<br />
<input type="checkbox" id="check3" name="check3" class="chkgroup2"/>
Set 2 check 1?
<br /><input type="checkbox" id="check4" name="check4" class="chkgroup2"/>
Set 2 check 2?
<br /><input type="checkbox" id="check5" name="check5" class="chkgroup2"/>
Set 2 check 3?
<br /><input type="submit" />

自定义方法用于验证复选框

$(function () {
    jQuery.validator.addMethod("checkboxCheck", function(value, element,params) {
            return $(params[0]+':checked').length > 0;
    });
    $("#myForm").validate({

        rules: {
            check0:{
                checkboxCheck:['.chkgroup'],
            },
            check3:{
                checkboxCheck:['.chkgroup2'],
            },
        },
        messages: {
            check0:{
                checkboxCheck: "check your checkbox",
            },
            check3:{
                checkboxCheck: "check your checkbox",
            },
        },
        submitHandler: function(form) {
            // ajax goes here
            alert("valid form");
            return false;
        }
    });

});

1 个答案:

答案 0 :(得分:1)

您可以使用css float和每个集合周围的div包装器来实现。 见:http://jsfiddle.net/Xu7ZK/2/