如何使用jQuery验证插件使用户从多个选择标签中的至少一个中选择“是”？

Question

Using jQuery Validation Plugin, I am validating a form in following way. There are multiple select tags. They all have default "Select" value and 2 other options as "Yes" and "No". They are enabled or disabled dynamically when filling the form. User has to select "Yes" for at least one of the enabled select tags.

I have created a method using addMethod which does that. But it validates the same thing for every select element, and creates a separate error message for each one. Also, the error messages won't go away unless the user changes one of the options to "Yes" and then click on all other select elements.

I want to generate only one error message, which will go away as soon as user changes at least one select option to "Yes". Also the error highlight of all the tags should go away at once. Please help.

Here's the code I'm using:

HTML form -

<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 Plugin code -

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

    });

});

JSFiddle

Answer 1

I have did few changes into your JavaScript so it will run fine with your code. Please replace your JavaScript code with below, also see 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.");
        }

    });
});

Answer 2

After much trial and error, here's how I could solve it.

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

    });
});

JS Fiddle - http://jsfiddle.net/r_yash/arfucq2s/2/