使用jQuery Validation Plugin，我正在以下列方式验证表单。有多个选择标签。它们都具有默认的“选择”值，另外两个选项为“是”和“否”。填写表单时会动态启用或禁用它们。用户必须为至少一个启用的选择标记选择“是”。
我已经使用addMethod创建了一个方法。但它为每个select元素验证相同的内容，并为每个元素创建单独的错误消息。此外，除非用户将其中一个选项更改为“是”，然后单击所有其他选择元素，否则错误消息不会消失。
我想只生成一条错误消息，只要用户将至少一个选择选项更改为“是”，该消息就会消失。此外，所有标签的错误突出显示应立即消失。请帮忙。
这是我正在使用的代码：
HTML表单 -
<form name="new_registration" id="new_registration" method="post" action="">
<div class="row">
<span class="field_name">Parares</span>
<span class="field_input">
<span class="error" id="parares_error_output"></span>
<select name="parares_a" id="parares_a" disabled="disabled">
<option value="0" selected="selected">Select</option>
<option value="1">Yes</option>
<option value="2">No</option>
</select>
<span>: A</span>
<br />
<select name="parares_b" id="parares_b" disabled="disabled">
<option value="0" selected="selected">Select</option>
<option value="1">Yes</option>
<option value="2">No</option>
</select>
<span>: B</span>
<br />
<select name="parares_c" id="parares_c" disabled="disabled">
<option value="0" selected="selected">Select</option>
<option value="1">Yes</option>
<option value="2">No</option>
</select>
<span>: C</span>
<br />
<select name="parares_d" id="parares_d" disabled="disabled">
<option value="0" selected="selected">Select</option>
<option value="1">Yes</option>
<option value="2">No</option>
</select>
<span>: D</span>
</span>
</div>
<div class="row">
<span class="field_input">
<button type="submit" id="submit" name="sumbit">Submit</button>
</span>
</div>
</form>
jQuery Validation插件代码 -
$(document).ready(function() {
$("#submit").click(function(){
$.validator.addMethod("validateParares", function(value, element) {
return this.optional( element ) ||
($('#parares_a').val() == 1 ||
$('#parares_b').val() == 1 ||
$('#parares_c').val() == 1 ||
$('#parares_d').val() == 1);
}, "Select proper parares<br />");
var validator = $("#new_registration").validate({
rules: {
parares_a: {
validateParares: true,
min: 1,
},
parares_b: {
validateParares: true,
min: 1,
},
parares_c: {
validateParares: true,
min: 1,
},
parares_d: {
validateParares: true,
min: 1,
}
},
errorPlacement: function(error, element){
if (element.attr("name") == "parares_a" ||
element.attr("name") == "parares_b" ||
element.attr("name") == "parares_c" ||
element.attr("name") == "parares_d") {
error.appendTo($('#parares_error_output'));
}
else {
error.insertAfter(element);
}
},
});
if(validator.form()){
alert("This form seems valid. Click 'Ok' to submit.");
}
});
});
答案 0 :(得分：0)
我对您的JavaScript进行了一些更改，因此它可以正常运行您的代码。 请在下面替换您的JavaScript代码，另请参阅jsfiddle
$.validator.addMethod("validateParares", function(value, element) {
return this.optional( element ) ||
($('#parares_a').val() == 1 ||
$('#parares_b').val() == 1 ||
$('#parares_c').val() == 1 ||
$('#parares_d').val() == 1);
}, "Select proper parares<br />");
$(document).ready(function() {
var validator = $("#new_registration").validate({
rules: {
parares_a: {
validateParares: true,
}
},
errorPlacement: function(error, element){
if (element.attr("name") == "parares_a" ||
element.attr("name") == "parares_b" ||
element.attr("name") == "parares_c" ||
element.attr("name") == "parares_d") {
error.appendTo($('#parares_error_output'));
}
else {
error.insertAfter(element);
}
},
});
$("#submit").click(function(){
if(validator.form()){
alert("This form seems valid. Click 'Ok' to submit.");
}
});
});
答案 1 :(得分：0)
经过多次试验和错误，以下是我可以解决的问题。
$.validator.addMethod("validateParares", function(value, element) {
return this.optional( element ) ||
(
(($('#parares_a').val() != 2) && !($('#parares_a').prop('disabled'))) ||
(($('#parares_b').val() != 2) && !($('#parares_b').prop('disabled'))) ||
(($('#parares_c').val() != 2) && !($('#parares_c').prop('disabled'))) ||
(($('#parares_d').val() != 2) && !($('#parares_d').prop('disabled')))
);
}, "Select proper parares<br />");
$(document).ready(function() {
var validator = $("#new_registration").validate({
rules: {
parares_a: {
validateParares: true,
},
parares_b: {
validateParares: true,
},
parares_c: {
validateParares: true,
},
parares_d: {
validateParares: true,
}
},
showErrors: function(errorMap, errorList) {
console.log(errorList);
if(typeof(errorMap.parares_a) !='undefined' ||
typeof(errorMap.parares_b) !='undefined' ||
typeof(errorMap.parares_c) !='undefined' ||
typeof(errorMap.parares_d) !='undefined') {
$('#parares_error_output').html('Select proper parares<br />');
} else {
$('#parares_error_output').html('');
}
}
});
$("#submit").click(function(){
if(validator.form()){
alert("This form seems valid. Click 'Ok' to submit.");
}
});
});