我是新來的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