Question

我是jQuery的新手，但想使用这个表单验证插件：

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

$(".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中我找不到这种语法的kinf？它是否特定于此插件？
默认情况下，此插件会创建显示错误消息的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>

Answer 1

该语法来自标准Javascript，并非特定于此插件。每个表单元素都有一个引用，它返回到它作为点属性所在的表单。在该函数中执行console.dir(element)，然后检查Firebug或Webkit Inspector中的元素，以查看可用的其他属性（并习惯这样做并使用它们）。
它必定是导致问题的removeClass(errorClass)，但我不确定你想用这些高亮功能完成什么，所以我不认为删除它是解决方案。

jQuery插件：验证请解释此代码

1 个答案: