1

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

问题：我们怎样才能避免这个问题？

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

在此处输入图像描述

更新

jsfiddle：http: //jsfiddle.net/SPK3D

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

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

4

1 回答 1

3

您可以使用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/

于 2013-07-29T15:18:08.400 回答