我的 jquery 验证表单需要一些帮助。除了错误文本框部分的突出显示之外，我设法让一切正常工作。我需要发生以下情况：
每当某个字段的规则被破坏时，该字段必须应用黄色背景色 3 秒；然后它变回白色。有人可以帮我吗？
这是我的代码：
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"> </script>
<script type="text/javascript">
$(document).ready(function() {
$("#form1").validate({
rules: {
name: {
required: true,
minlength: 3
},
date: {
date:true
},
email: {// compound rule
required: true,
email: true
},
url: {
url: true
},
},
messages:
{
name: {
minlength: jQuery.format("At least {0} characters required.")
}
}
});
});
</script>
<style type="text/css">
* { font-family: Verdana; font-size: 11px; line-height: 14px; }
.submit { margin-left: 125px; margin-top: 10px;}
.label { display: block; float: left; width: 120px; text-align: right; margin-right: 5px; }
.form-row { padding: 5px 0; clear: both; width: 700px; }
label.error { width: 250px; display: block; float: left; color: red; padding-left: 10px; }
input[type=text], textarea { width: 250px; float: left; }
textarea { height: 50px; }
</style>
</head>
<body>
<form id="form1" method="post" action="">
<div class="form-row"><span class="label">Name *</span><input type="text" name="name" /></div>
<div class="form-row"><span class="label">Birthdate </span><input type="text" name="date" /></div>
<div class="form-row"><span class="label">E-Mail *</span><input type="text" name="email" /></div>
<div class="form-row"><span class="label">Home page</span><input type="text" name="url" /></div>
<div class="form-row"><input class="submit" type="submit" value="Submit"></div>
</form>
</body>
</html>
我试图将其插入但无法使其正常工作：
$(".selector").validate({
highlight: function(element, errorClass, validClass) {
$(element).addClass(errorClass).removeClass(validClass);
$(element.form).find("label[for=" + element.id + "]")
.addClass(errorClass);
},
unhighlight: function(element, errorClass, validClass) {
$(element).removeClass(errorClass).addClass(validClass);
$(element.form).find("label[for=" + element.id + "]")
.removeClass(errorClass);
}
});