jQuery Validate 插件多个错误放置

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端使用“switch case”而不是“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'));
           }
        }