Question

如果在最后一个复选框的文本后没有选中复选框，我想移动我得到的错误。

HTML：

<form id="myform" value="aaa">
    <input type="checkbox" name="test[]" value='' />x
    <input type="checkbox" name="test[]" value='' />y
    <input type="checkbox" name="test[]" value='something' />z
    <input type="submit" />
</form>

jQuery的：

$(document).ready(function () {
    $('#myform').validate({
        rules: {
            'test[]': {
                required: true
            }
        }
    });
});

以下是我的尝试：

errorPlacement: function(error, element) {
if (element.is(':checkbox')) {
    $(element).parent().last().addClass('error');
} else {
    error.insertAfter(element);
}

但是这个类添加到复选框的父级，我希望在复选框之后的最后一个文本之后添加类，在本例中为“z”。此外，当我使用我的代码时，错误不会显示只有类被添加到父代。

JSFiddle Demo with parent class being added

JSFiddle Demo with error showing

Answer 1

您可以执行类似

的操作

＆＃13;

$(document).ready(function () {
    $('#myform').validate({
        errorPlacement: function (error, element) {
            if (element.is('[name="test[]"]')) {
                error.appendTo(element.parent());
            } else {
                error.insertAfter(element);
            }
        },
        rules: {
            'test[]': {
                required: true
            }
        },
        submitHandler: function (form) { // for demo
            alert('valid form submitted'); // for demo
            return false; // for demo
        }
    });
});

＆＃13;

.error {
    color:red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>

<form id="myform" value="aaa">
    <div>
        <input type="checkbox" name="test[]" value='' />x
        <input type="checkbox" name="test[]" value='' />y
        <input type="checkbox" name="test[]" value='something' />z</div>
    <input name="test" required />
    <input type="submit" />
</form>

＆＃13;

验证插件jquery中的复选框上的错误

1 个答案: