jquery驗證：顯示錯誤旁邊的元素，並將其附加到div容器

Question

我想驗證使用jquery驗證插件和錯誤顯示在文本字段旁邊。有沒有什麼方法可以將它顯示在div容器中。

我試用了http://jquery.bassistance.de/validate/demo/的演示代碼。

JS的下面

$().ready(function() { 

    var container = $('div.controller'); 
    // validate signup form on keyup and submit 
    $("#signupForm").validate({ 
     rules: { 
      firstname: "required", 
      lastname: "required", 
      username: { 
       required: true, 
       minlength: 2 
      }, 
      password: { 
       required: true, 
       minlength: 5 
      }, 
      confirm_password: { 
       required: true, 
       minlength: 5, 
       equalTo: "#password" 
      }, 
      email: { 
       required: true, 
       email: true 
      }, 
     }, 
     messages: { 
      firstname: "Please enter your firstname", 
      lastname: "Please enter your lastname", 
      username: { 
       required: "Please enter a username", 
       minlength: "Your username must consist of at least 2 characters" 
      }, 
      password: { 
       required: "Please provide a password", 
       minlength: "Your password must be at least 5 characters long" 
      }, 
      confirm_password: { 
       required: "Please provide a password", 
       minlength: "Your password must be at least 5 characters long", 
       equalTo: "Please enter the same password as above" 
      }, 
      email: "Please enter a valid email address" 
     }, 

    }); 


}); 


</script> 

的HTML代碼代碼如下

<div class="master_container"> 
     <div class="master_container_inner"> 

     <div class="container"> 

     </div> 

       <form class="cmxform" id="signupForm" method="get" action=""> 
    <fieldset> 
     <legend>Validating a complete form</legend> 
     <p> 
      <label for="firstname">Firstname</label> 
      <input id="firstname" name="firstname" /> 
     </p> 
     <p> 
      <label for="lastname">Lastname</label> 
      <input id="lastname" name="lastname" /> 
     </p> 
     <p> 
      <label for="username">Username</label> 
      <input id="username" name="username" /> 
     </p> 
     <p> 
      <label for="password">Password</label> 
      <input id="password" name="password" type="password" /> 
     </p> 
     <p> 
      <label for="confirm_password">Confirm password</label> 
      <input id="confirm_password" name="confirm_password" type="password" /> 
     </p> 
     <p> 
      <label for="email">Email</label> 
      <input id="email" name="email" /> 
     </p> 
     <p> 
      <input class="submit" type="submit" value="Submit" /> 
     </p> 
    </fieldset> 
</form> 

     </div> 
    </div> 

Answer 1

我Display both summary and individual error messages using the jQuery validation plugin發現了類似的問題。

不同之處在於他們提醒錯誤消息。我制定瞭解決我的問題通過將下面的validate方法

 showErrors: function(errorMap, errorList) { 
      if (submitted) { 
       var summary = "You have the following errors: \n"; 
       $.each(errorList, function() { summary += " * " + this.message + "\n"; }); 
       //alert(summary); 
       $("div.container").html(summary); 
       $("div.container").show(); 
       submitted = false; 
      } 
      else 
      { 
       $("div.container").hide(); 
      } 
      this.defaultShowErrors(); 
     },   
     invalidHandler: function(form, validator) { 
      submitted = true; 
     }