2012-03-18 63 views
2

我是新來的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 Ë以下我已經關於這條線問題:

  1. $(element.form)選擇包含element form標籤(即當前正在驗證的輸入字段)爲什麼?在jQuery sellector中,我找不到這種語法嗎?這是特定於這個插件嗎?
  2. 默認情況下,這個插件會在顯示錯誤消息的地方創建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> 
+0

你檢查了它附加的CSS代碼嗎?我的意思是'errorClass = errorMessageCls'和'validClass = success'? – Asif 2012-03-18 10:11:14

+0

是的,它工作正常。 – Narek 2012-03-18 10:25:03

回答

2
  1. 這句法是標準的JavaScript,而不是具體到這個插件。每個表單元素都有一個引用,以它作爲點屬性駐留的形式返回。在該函數中執行console.dir(element),然後檢查Firebug或Webkit Inspector中的元素以查看還有哪些其他屬性可用(並習慣於這樣做並使用它們)。

  2. 它必須是removeClass(errorClass)這是造成這個問題,但我不確定你想用這些高亮功能來完成,所以我不認爲這是解決方案。

+0

**對於那些將有相同問題請參閱這裏**:http://stackoverflow.com/questions/9757610/jquery-plugin-validation-labels-are-getting-hiden – Narek 2012-03-18 14:12:54