2012-03-18 58 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