我是 jQuery 新手，但想使用这个表单验证插件:
http://bassistance.de/jquery-plugins/jquery-plugin-validation/
在其options documentation中有一个代码片段:
$(".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 sellector 中我找不到这种语法？是这个插件特有的吗？- 默认情况下，此插件会创建显示错误消息的标签字段。当我使用上面的代码时，没有生成错误标签？当我评论上面那该死的行(:))时，标签又被生成了。那么什么包含该行以防止创建错误标签？
我已经谷歌搜索并调试了很多，但无法理解我的问题的答案。
附注这是我使用的代码:
<!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>
最佳答案
该语法来自标准 Javascript，并非特定于此插件。每个表单元素都有一个对它所在表单的引用作为点属性。在该函数中执行
console.dir(element)，然后在 Firebug 或 Webkit Inspector 中检查该元素以查看其他可用属性(并习惯执行此操作并使用它们)。肯定是
removeClass(errorClass)导致了问题，但我不确定您要使用这些突出显示功能来完成什么任务，所以我不认为删除它就是解决方案。
关于jQuery 插件 : Validation explain this code please，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9757319/