【发布时间】：2012-03-18 09:40:40
【问题描述】：
我是 jQuery 新手，但想使用这个表单验证插件：
http://bassistance.de/jquery-plugins/jquery-plugin-validation/
在其options documentation中有一个代码sn-p：
$(".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);
}
});
请解释一下这一行：
$(element.form).find("label[for=" + element.id + "]").removeClass(errorClass);
我对这一行的以下问题：
-
$(element.form)选择包含element的表单标签（即正在验证的当前输入字段） 为什么？在 jQuery 卖家中我找不到这种语法？是这个插件特有的吗？ - 默认情况下，此插件会在其中显示错误消息创建标签字段。当我使用上面的代码时，没有生成错误标签？当我评论上面该死的那一行时（:)），实验室正在生成。那么包含该行以防止创建错误标签的内容是什么？
我有googled 并调试了很多但无法理解我的问题的答案。
附：这是我使用的代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
<style type="text/css">
* { font-family: Verdana; font-size: 96%; }
label { width: 10em; float: left; }
label.errorMessageCls { float: none; color: red; padding-left: .5em; vertical-align: top;}
label.success {float: none; color: #0F0; padding-left: .5em; vertical-align: top;}
p { clear: both; }
.submit { margin-left: 12em; }
em { font-weight: bold; padding-right: 1em; vertical-align: top; }
.higlightErrorField{background-color:#F00; color:#FFF;}
</style>
<script>
$(document).ready(function(){
$("#commentForm").validate({
messages: {
name: "Name is missing",
email: {
required: "E-mail address is missing",
email: "Your email address is not valid"
}
},
errorClass: "errorMessageCls",
validClass: "success",
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);
},
submitHandler: function() { alert("Submitted!") }
});
});
</script>
</head>
<body>
<form class="cmxform" id="commentForm" method="get" action="">
<fieldset>
<legend>A simple comment form with submit validation and default messages</legend>
<p>
<label for="cname">Name</label>
<em>*</em><input id="cname" name="name" size="25" class="required" minlength="2" />
</p>
<p>
<label for="cemail">E-Mail</label>
<em>*</em><input id="cemail" name="email" size="25" class="required email" />
</p>
<p>
<label for="curl">URL</label>
<em> </em><input id="curl" name="url" size="25" class="phone" value="" />
</p>
<p>
<label for="ccomment">Your comment</label>
<em>*</em><textarea id="ccomment" name="comment" cols="22" class="required"></textarea>
</p>
<p>
<input class="submit" type="submit" value="Submit"/>
</p>
</fieldset>
</form>
</body>
</html>
【问题讨论】：
-
你检查了它附加的 CSS 代码吗？我的意思是
errorClass = errorMessageCls和validClass = success? -
是的，它工作正常。
标签： jquery jquery-plugins validation