如何在jQuery Validate插件中依赖成功时向依赖元素添加有效类?

时间:2013-10-04 05:42:44

标签: jquery jquery-validate

我有两个文本框,电话号码#inputPh和电子邮件#inputEm。这些中的任何一个都是强制性的。我正在使用以下规则:

         rules: {

                inputPhone: {                           
                        required: {depends: function(){
                        if($("#inputEm").val()=="")//return value based on textbox1 status
                        return true;
                        else
                        return false;
                            }
                        },
                        isNum: true,
                        minlength: 10,
                        maxlength: 12
                    },        
               inputEmail: {
                        required: {depends: function(){
                        if($("#inputPh").val()=="")//return value based on textbox1 status
                        return true;
                        else
                        return false;
                            }
                        },
                        email: true
                    }
         },
         highlight: function(element) {
                    $(element).closest('.control-group').removeClass('success').addClass('error');

        },
        success: function(element) {
                    element.addClass('valid').closest('.control-group').removeClass('error').addClass('success');

        }

验证工作正常,但问题是当表单以空字段提交时,两个文本框都将与错误类一起使用。之后,当我在其中一个文本框中输入有效值时,只有该particulor字段获得成功类,而另一个将具有错误类,即使可以提交表单。

如何通过jQuery Validator函数访问或传递依赖元素?

1 个答案:

答案 0 :(得分:1)

相反,请使用the additional-methods.js file中包含的require_from_group方法。根据代码评论:

/*
 * Lets you say "at least X inputs that match selector Y must be filled."
 *
 * The end result is that neither of these inputs:
 *
 *  <input class="productinfo" name="partnumber">
 *  <input class="productinfo" name="description">
 *
 *  ...will validate unless at least one of them is filled.
 *
 * partnumber:  {require_from_group: [1,".productinfo"]},
 * description: {require_from_group: [1,".productinfo"]}
 *
 */

在其他字段上保留错误类没有任何问题...

$(document).ready(function() {

    $('#myform').validate({
        rules: {
            inputPhone: {
                require_from_group: [1, '.mygroup'],
                // isNum: true, // <-- no such rule in this plugin
                minlength: 10,
                maxlength: 12
            },
            inputEmail: {
                require_from_group: [1, '.mygroup'],
                email: true
            }
        }
    });

});

DEMO:http://jsfiddle.net/wWjWM/

或者,您可以使用groups选项将两个字段的消息合并为一个标签。但是,这可能并不理想,因为它也适用于这两个领域的所有其他规则。

顺便说一句:additional-methods.js文件中有各种电话号码规则,您可以使用这些规则代替minlengthmaxlength。 (此插件中也没有isNum这样的规则。它被称为digits。)