如果元素无效则回调

Question

我有这段代码，正在验证我的表单：

   jQuery("form#theform").validate({        
        rules: {
            email_again: {
                equalTo: "#email"
            }
        }
    });

这个可以，但是我需要做函数，而email_again不等于。我需要访问函数中的 'element'。

所以，我想答案可能是这样的

 rules: {
            email_again: {
                equalTo: "#email"
                invalidcallback: function(element){
                   // do sth with element
                }

            }
        }
    });

我在文档中找不到任何相关信息。

编辑：

Sparky 让我快到了：

    rules: {
        email: {
            required: true
        },
        email_again: {
            equalTo: "#email"
        }
    },
    highlight: function(element, errorClass, validClass) {
        // custom code for 'email_again' field
        if (element.name === "email_again") {
            console.log('email_again in error');
        }
        // default 'highlight' code below
        if (element.type === "radio") {
            this.findByName(element.name).addClass(errorClass).removeClass(validClass);
        } else {
            $(element).addClass(errorClass).removeClass(validClass);
        }
    }
}

现在，我需要知道被打破的规则。我需要知道它是 "equalTo"，这样我才能找到兄弟标签并向其添加 class：

jQuery(element).siblings( 'label' ).addClass('error NotEqualTo');

或者，如果我有 equalTo "comparator"（在本例中为 #email），我可以自己进行相等比较并执行适当的 addClass。

Answer 1

rules: {
    email_again: {
        // list of only methods/rules
        equalTo: "#email"  // <- this is a valid method/rule
        invalidcallback: function(element) { // <- INVALID - this is not a method/rule
            ....
        }
    }
}

没有特定于任何特定字段无效时的回调函数。您只能在 rules 对象字面量中列出 key:value 对 fields:rules。您想要的回调函数不是公认的规则。

不过，还有a callback that's fired every time any field is invalid called highlight。使用为您的 email_again 字段封装自定义代码的条件。请确保还包含默认 highlight 代码，否则您将破坏插件。

highlight: function(element, errorClass, validClass) {
    // custom code for 'email_again' field
    if (element.name === "email_again") {
        console.log('email_again in error');
    }
    // default 'highlight' code below
    if (element.type === "radio") {
        this.findByName(element.name).addClass(errorClass).removeClass(validClass);
    } else {
        $(element).addClass(errorClass).removeClass(validClass);
    }
}

Proof-of-concept 演示：http://jsfiddle.net/r98g06kz/

编辑:

既然您想改变类的应用方式，只需调整默认代码...

highlight: function(element, errorClass, validClass) {
    if (element.type === "radio") {
        this.findByName(element.name).addClass(errorClass).removeClass(validClass);
    } else {
        if (element.name === "email_again") {
            // your custom class 
            $(element).siblings( 'label' ).addClass('error NotEqualTo');
        } else {
            $(element).addClass(errorClass).removeClass(validClass);
        }
    }
}

然后你还需要 unhighlight 回调如下...

unhighlight: function(element, errorClass, validClass) {
    if (element.type === "radio") {
        this.findByName(element.name).removeClass(errorClass).addClass(validClass);
    } else {
        if (element.name === "email_again") {
            // your custom class 
            $(element).siblings( 'label' ).removeClass('error NotEqualTo');
        } else {
            $(element).removeClass(errorClass).addClass(validClass);
        }
    }
}

如果元素无效则回调

Do callback if an element is invalid

jquery

jquery-validate