jQuery驗證插件多個錯誤佈局

Question

請幫我使用jQuery Validate插件。可以在自定義地點顯示錯誤消息嗎？

<div class="row"> 
<div class="cell label"> 
<?php echo $entry_name; ?> 
<div> <!-- .cell.label --> 
<div class="cell input"> 
<input type="text" id="Username" name="name" value="" tabindex="1" class="kilo" value="<?php echo $name; ?>"> 
<div> <!-- .cell.input --> 
<div class="cell context"> 
This is what we'll use for the salutation in any emails we send you. 
<?php if ($error_name) { ?> 
<span class="error"><?php echo $error_name; ?></span> 
<?php } ?>  
**<div class="status">i want to display the error message here</div>** 
<div> <!-- .cell.context --> 
<div> <!-- .row --> 

<div class="row"> 
<div class="cell label"> 
<?php echo $entry_email; ?> 
</div> <!-- .cell.label --> 
<div class="cell input"> 
<input type="text" id="Email" name="email" value="" tabindex="1" class="kilo email"> 
</div> <!-- .cell.input --> 
<div class="cell context"> 
We won't spam you or share your email. Ever. 
**<div class="status">i want to display the error message here</div>** 
</div> <!-- .cell.context --> 
</div> <!-- .row --> 

編輯：它可以使用多個errorLabelContainer？

Answer 1

您可以使用errorLabelContainer ......看到這裏的文檔 - >http://docs.jquery.com/Plugins/Validation/validate#toptions

errorLabelContainer: "#messageBox1"

其中＃messageBox1是你想要的DIV ID的消息顯示

Answer 2

您可以使用這裏有你喜歡的任何風格 - 任何html格式風格。我的剪切代碼在這裏。 （如果你喜歡，你可以在js方面使用「開關盒」而不是「else if」）

**************** HTML ******** *********************

<form id="user_registration_frm"> 
     <div class="user-reg-div display-user-reg" id="user_registration">  
      <div class="user-registration-labels"> 
      <label>FIRST NAME:</label><br/> 
      <label>LAST NAME:</label><br/> 
      <label>EMAIL:</label><br/> 
      <label>PASSWORD:</label><br/> 
      </div> <!--/user_registration-labels --> 
      <div class="user-registration-texts"> 
       <input type="text" id="users_first_name" name="users_first_name" autofocus><br/> 
       <input type="text" id="users_last_name" name="users_last_name"/><br/> 
       <input type="text" id="users_email" name="users_email" /><br/> 
       <input type="password" id="users_password" name="users_password" autocomplete="off"/><br/> 
      </div> <!--/user_registration-texts --> 
      <div class="user-registration-buttons">       
      <div class="big-button azure right" id="create_new_user"> 
        <i class="fa fa-server fa-2x"></i> 
        <p class="big-button-p">CREATE</p> 
      </div> 
     </div><!--/user_registration-buttons --> 
        <div id="users-validation_error_div" class="users-validation-error-div"> 
         <label id="users_email_error_lbl"></label><br/> 
         <label id="users_password_error_lbl"></label><br/>    
        </div><!--/users_validation_error_div --> 
       </div> <!--/user-reg-div --> 



    </form> 

****************** JS *** *********************

$("#user_registration_frm").validate({ 
     rules:{ 
      users_email:{ 
       required: true, 
       minlength: 4, 
       maxlength: 16, 
       email:true, 
      }, 

      users_password:{ 
       required: true, 
       minlength: 6, 
       maxlength: 16, 
      } 
     }, 
     messages:{ 
      users_email:{ 
       required: "Email field is required", 
       minlength: "min length 4", 
       maxlength: "max length 16", 
       email:"Please input correct email", 
      }, 

      users_password:{ 
       required: "Password field is required", 
       minlength: "min length 4", 
       maxlength: "max length 16", 
     } 
     }, 

     errorPlacement: function(error, element) { 

      if (element.is(users_email)) { 
      console.log(element.attr('id')); 
      error.appendTo($('#users_email_error_lbl')); 
      } 
      else if(element.is(users_password)){ 
      console.log(element.attr('id')); 
      error.appendTo($('#users_password_error_lbl')); 
      } 
     }