jQuery Validation错误类影响Select元素

Question

在按下提交按钮后，<select>表单元素上发生验证错误时，errorClass似乎应用于<select>元素，这不是我想要的。 errorClass应仅应用于错误消息。

问题：我们如何避免这个问题？

jsFiddle ：http://jsfiddle.net/ufTn8/

---

更新

jsfiddle ：http://jsfiddle.net/SPK3D

如果您查看更新的代码，当错误发生时，类alert不会应用于错误元素，直到您单击错误元素...这个奇怪的行为在Chrome和Firefox浏览器。

不知何故$(element).siblings('label.error').addClass('alert');最初没有添加alert类......

Answer 1

您可以使用highlight和unhighlight回调函数将您希望的任何类应用于您希望的任何元素。以下是默认功能。通过将它们作为选项包含在.validate()中，您可以使用您希望的任何代码覆盖这些默认值。

    highlight: function( element, errorClass, validClass ) {
        if ( element.type === "radio" ) {
            this.findByName(element.name).addClass(errorClass).removeClass(validClass);
        } else {
            $(element).addClass(errorClass).removeClass(validClass);
        }
    },
    unhighlight: function( element, errorClass, validClass ) {
        if ( element.type === "radio" ) {
            this.findByName(element.name).removeClass(errorClass).addClass(validClass);
        } else {
            $(element).removeClass(errorClass).addClass(validClass);
        }
    }

修改：

关于OP的修正问题，

  

“不知何故$(element).siblings('label.error').addClass('alert');最初没有添加警报类......”

那是因为你试图选择label.error但它还不存在。您必须先拥有label.error ，然后才能选择它并应用.alert ......这两件事情不可能同时发生。

解决方法可能包括将插件的默认errorClass更改为.alert，然后使用highlight和unhighlight应用其他类需要应用于select元素。

请参阅：http://jsfiddle.net/SPK3D/1/