jquery 验证 css 不适用于一个表单字段

Question

我在最后一天一直在努力让我的 CSS 完美直观地用于注册表单，但我遇到了一个似乎无法解决的问题。

我的 ID 是 contactForm，我有几个通用的 CSS 规则设置，可以在输入上应用视觉提示或选择让用户知道这些值是否被接受:

#contactForm input.error, select.error  {border: 1px solid #AB000B; background-color:#FFF2F2}   
#contactForm input.valid, select.valid  {border: 1px solid #3D993D; background-color:#E2FEDF}   

这些是验证插件使用的一般错误和有效。

我想在输入的右侧设置一个绿色复选框(有效)或红色错误消息:

highlight: function(label) {
    $(label).addClass('error');
},
success: function(label) {
    label.text('OK').addClass('valid');
},

那些的 CSS 是:

#contactForm.jqv1 label.valid {
   width: 16px;
   background: url("../images/tick.png") center center no-repeat;
   display: inline-block;
   text-indent: -9999px;
}
#contactForm.jqv1 label.error {
   font-weight: bold;
   color: red;
}

.jqv1 类应用于整个表单以覆盖网站其他页面上使用的一些#contactForm 默认值。

除一个表单域外，一切都按预期工作。如果我输入一个正在使用的用户名，我将获得#contactForm input.error 样式(红色边框浅红色背景)和#contactForm.jqv1 label.error(右侧的粗体红色消息)。如果我输入有效的用户名，我会得到相反的结果 - 绿色边框和绿色复选标记。

但是 - 如果我输入无效的用户名然后切换到有效的用户名，我会得到绿色复选标记，但输入字段不会得到“class=valid”来触发绿色边框。它也做同样的反向操作(有效到无效的用户名保持边框绿色，即使我收到红色错误消息)。

其他字段工作正常 - 如果我更正无效条目，我将获得绿色边框和绿色复选标记。有问题的规则的验证规则确实使用了远程:

sp_user: {
                required: true,
                rangelength: [4,50],
                remote: {
                    cache:false,
                    async:false,
                    url: compath + "/rmtUserCFC.cfc?method=checkUsernameRemote&returnformat=json",
                    type: "post"
                }
            },

有什么建议可以解决这个最后一个 CSS 小错误吗？

Answer 1

尝试:

highlight: function(label) {
    $(label).addClass('error').removeClass('valid');
},
success: function(label) {
    label.text('OK').addClass('valid').removeClass('error');
},

添加新类不会删除旧类，因此您拥有同时具有这两个类的元素。