[英]jquery validation errorClass not working properly
发生的情况是,当您仅按“发送”时,仅消息正文文本框变为红色,这意味着将errorClass:'errorField'应用于其应有的状态,而其他元素却未如其应地变为红色。
同样,焦点正确地放在了消息电子邮件文本输入上,因此也许errorClass也正确地应用于了此字段,但是当您将焦点更改为消息主题字段时,消息电子邮件字段应该变成红色。
最后,如何让errorField类覆盖焦点类?
谢谢你的帮助!
HTML:
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>
<link rel="stylesheet" type="text/css" href="style/message.css">
<script type="text/javascript">
$(document).ready(function() {
$("#message-form").validate({
errorClass: 'errorField',
errorPlacement: function(error,element) {
return true;
}
});
});
</script>
</head>
<body>
blue = focus, green=notFocus, red=error
<div id="message-wrapper">
<form id="message-form" method="POST" action="">
<table>
<tr>
<td width="70px"><label for="message-email">From:</label></td>
<td><input type="text" name="message-email" id="message-email" class="message-input required email" /></td>
</tr>
<tr>
<td><label for="message-subject">Subject:</label> </td>
<td><input type="text" name="message-subject" id="message-subject" class="message-input required" minlength="5"/></td>
</tr>
<tr>
<td><label for="message-body" style="vertical-align: top">Message:</label> </td>
<td><textarea name="message-body" id="message-body" rows="4" cols="40" class="message-input required"></textarea></td>
</tr>
</table>
<input type="hidden" name="contact" value="1" />
<p><button type="submit">Send</button></p>
</form>
</div>
</body>
CSS:
div#message-wrapper{
width: 300px;
height: 400px;
}
input[type="text"], textarea {
/* background:#F4F4F4; */
background: green;
color: white;
border: solid 2px #DFDFDF;
}
input[type="text"]:focus, textarea:focus {
/* background:#F2F4F8; */
background: blue;
color: white;
border:solid 2px #333;
outline: 0;
}
.errorField{
/* background:#faf6d1; */
background: red;
color:black;
border:solid 1px #333;
}
.message-input{
width: 341px;
}
选择器是问题所在:
input[type="text"]
比.message-input
更具体,因此背景颜色不会改变 input.message-input:focus
代替input[type="text"]:focus
和input.message-input.errorField:focus
代替.errorField
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.