如何让用户使用jQuery Validation Plugin从多个选择标签中的至少一个中选择“是”？

使用jQuery Validation Plugin，我将按照以下方式validation表单。 有多个选择标签。 它们都具有默认的“选择”值，另外两个选项为“是”和“否”。 填写表单时会动态启用或禁用它们。 用户必须为至少一个启用的选择标签选择“是”。

我已经使用addMethod创建了一个方法。 但它为每个select元素validation相同的内容，并为每个元素创建单独的错误消息。 此外，除非用户将其中一个选项更改为“是”，然后单击所有其他选择元素，否则错误消息不会消失。

我想只生成一条错误消息，一旦用户将至少一个选择选项更改为“是”，该消息就会消失。 此外，所有标签的错误突出显示应立即消失。 请帮忙。

这是我正在使用的代码：

HTML表单 –

 
 Parares    Select Yes No  : A 
  Select Yes No  : B 
  Select Yes No  : C 
  Select Yes No  : D  
 
  Submit  
  

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
"); 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."); } }); }); 

的jsfiddle

Answer 1

我对您的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
"); $(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."); } }); }); 

Answer 2

经过多次试验和错误，以下是我如何解决它。

 $.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
"); $(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
'); } else { $('#parares_error_output').html(''); } } }); $("#submit").click(function(){ if(validator.form()){ alert("This form seems valid. Click 'Ok' to submit."); } }); }); 

JS小提琴 – http://jsfiddle.net/r_yash/arfucq2s/2/