Question

我一直在为最后一天工作，让我的CSS对于注册表格来说都非常直观，我只能解决一个我似乎无法解决的问题。

My for 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');
},

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

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

1 个答案: