我一直在为最后一天工作,让我的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错误被压扁?
答案 0 :(得分:1)
尝试:
highlight: function(label) {
$(label).addClass('error').removeClass('valid');
},
success: function(label) {
label.text('OK').addClass('valid').removeClass('error');
},
添加新类不会删除旧类,因此您有两个类的元素。