Question

我正在构建我的表单中的验证插件，并且每个人都运行良好。但是在复选框上，我将其视为HTML：

表格检查HTML复选框：

<div class="right">
    <div class="custom-checkbox"><input type="checkbox" name="family" value="" id="third-check" class="require-one error"><label for="third-check">Check off</label></div>
    <div class="custom-checkbox"><input type="checkbox" name="family" value="" id="fouth-check" class="require-one"><label for="fouth-check">Check off</label></div>
    <div class="custom-checkbox"><input type="checkbox" name="family" value="" id="five-check" class="require-one"><label for="five-check" class="">Check off</label></div>
    <div class="custom-checkbox"><input type="checkbox" name="family" value="" id="six-check" class="require-one">
    <label for="checks" generated="true" class="error">Please check at least one box.</label>
    <label for="six-check">Check off</label></div>
</div>

正如您所看到的，错误不在自定义复选框div之外。我怎么能这样做？

JS：

$.validator.addMethod('require-one', function(value) {
    return $('.require-one:checked').size() > 0;
}, 'Please check at least one box.');

var checkboxes = $('.right .require-one');
var checkbox_names = $.map(checkboxes, function(e, i) {
    return $(e).attr("name")
}).join(" ");

$(".valid").validate({
    meta: "validate",
    groups: { checks: checkbox_names },
    errorPlacement: function(error, element) {
    if (element.attr("type") == "checkbox") 
        error.insertAfter(checkboxes.last());
    else
        error.insertAfter(element);
    }  
});

Answer 1

试试这个：

 error.insertAfter(element.parent());

因为你想在div（它是父元素）之后添加消息到当前元素。

更新：聊天讨论后，正确的anser是：

error.insertAfter(element.parent().siblings().last());

Answer 2

你可以做这样的事情对我有用。 “optLocation”是与上例中的“family”相同的复选框

jQuery("#frmAddProducts").validate({                                  
    errorElement:'div',
    errorPlacement: function(error, element) {error.appendTo (element.siblings(".errordiv")); },    
    rules: { 
                txtProductTitle:{required: true}, 
                txtPrice:{required: true, number: true}, 
                optCategory:{required: true}, 
                optMainCategory:{required: true}, 
                txtProductImage:{required: true},
                optLocation:{required: true, minlength: 1},                 
                txtSummary:{required: true}, 
                txtDetails:{required: true}
            },
    messages: {
                txtProductTitle: { required: "Please enter a title" },
                txtPrice:{required: "Please enter a price",number: "Please enter only digits"}, 
                optCategory:{required: "Please select a sub-category"}, 
                optMainCategory:{required: "Please select a category"},
                txtProductImage:{required: "Please upload images"},
                optLocation: { minlength: "Please select a location", required: "Please select a location" },
                txtSummary:{required: "Please enter summary"}, 
                txtDetails:{required: "Please enter description"}
            },
    submitHandler: function() { fnAddProduct(); }

    });

div之外的jQuery Validation Plugin错误

2 个答案: