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

Question

使用jQuery验证插件，我通过以下方式验证表单。 有多个选择标签。 它们都具有默认的“选择”值和2个其他选项，例如“是”和“否”。 填写表格时会动态启用或禁用它们。 用户必须为至少一个启用的选择标签选择“是”。

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

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

这是我正在使用的代码：

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验证插件代码-

$(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

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

    });
});

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<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小提琴-http: //jsfiddle.net/r_yash/arfucq2s/2/