如何使用户选择“是"?使用jQuery验证插件从多个选择标签中的至少一个中删除? [英] How to make user select "yes" from at least one of multiple select tags using jQuery Validation Plugin?

问题描述

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

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.

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

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

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

推荐答案

经过反复试验，这是我可以解决的方法.

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

这篇关于如何使用户选择“是"?使用jQuery验证插件从多个选择标签中的至少一个中删除?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！