我是新来的jQuery,但要使用这种形式验证插件: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);
Th Ë以下我已经关于这条线问题:
$(element.form)
选择包含element
form标签(即当前正在验证的输入字段)为什么?在jQuery sellector中,我找不到这种语法吗?这是特定于这个插件吗?- 默认情况下,这个插件会在显示错误消息的地方创建labe字段。当我使用上面的代码时,错误标签没有被生成?当我评论上面这个该死的行(:)时,这个实验室正在生成Agian。那么包含该行的内容是否可以防止创建错误标签?
我有googled
和调试了很多,但不明白我的问题的答案。
P.S.下面是我使用的代码:
<!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'? – Asif 2012-03-18 10:11:14
是的,它工作正常。 – Narek 2012-03-18 10:25:03