2

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

我的 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 错误有什么建议吗？

4

1 回答 1

1

尝试：

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

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

于 2012-12-17T20:22:59.723 回答