jQuery Validate plugin Multiple error placement

Question

Please help me with jQuery Validate plugin. It is possible to display the error message on custom place?

<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 -->

Edit: it is possible to use multiple errorLabelContainer?

Manse · Accepted Answer · 2011-11-06 21:00:36Z

3

You can use errorLabelContainer ... See the documentation here --> http://docs.jquery.com/Plugins/Validation/validate#toptions

errorLabelContainer: "#messageBox1"

where #messageBox1 is the id of the div you want the messages to display

answered Nov 6, 2011 at 21:00

Manse

38.1k11 gold badges88 silver badges112 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Musa · Accepted Answer · 2015-07-16 06:03:29Z

You can use here any style you like - any html form style. My snipped code is here. (If you like you can use "switch case" instead of "else if" in js side)

**************** 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'));
           }
        }

enter image description here

I couldn't make it work with this code on errorPlacement, but the following did work: errorPlacement: function(error, element) { if (element[0].id === 'users_email') { $('#users_email_error_lbl').text(error[0].innerHTML); }

Collectives™ on Stack Overflow

jQuery Validate plugin Multiple error placement

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related