views:

185

answers:

0

Hi, is there a way to choose different containers with the jquery validate plugin for showing the errors in an independent container or a way to create a new container for every error but not just use the same one ?

currently my code looks like this:

  $(document).ready(function(){

  $("#loginForm").validate({    
    errorClass: 'errorContainer',
    errorElement: 'div',
    errorLabelContainer: '#errorContainer',


    rules: {    
      username: { required: true, email: true },
      password: { required: true, minlength: 5 }
           },
   messages: {        
     username: {
       required: 'Please type your username',
       email: 'username: type a valid email user@host'
     },
     password: {
       required: 'Please type your password',
       minlength: 'password: At least {0} characters required!'
     }
   }

});

});

and the html looks like:

  <form name="loginForm" id="loginForm" method="post" action="/chat">

  <div id="errorContainer" class="notification attention png_bg">
  </div>

  <p>
   <label for="username">Username</label>
   <input tabindex=1 name="username" class="text-input" type="text"/>
  </p>
  <div class="clear"></div>
  <p>
   <label for="password">Password</label>
   <input tabindex=2 name="password" class="text-input" type="password" />
  </p>
  <div class="clear"></div>
  <p id="remember-password">
   <input type="checkbox" />Remember me
  </p>
  <div class="clear"></div>
  <p>
   <input id="submit" class="button" type="submit" value="Sign In" />
  </p>

  </form>

I would like to call on every error this part of the code.

 '<div id="errorContainer" class="notification attention png_bg">
  </div>'

so at the end i could get something like:

   <div id="errorContainer" class="notification attention png_bg">
    <div>error message 1</div>
   </div>

  <div id="errorContainer" class="notification error png_bg">
    <div>error message 2</div>
  </div>

Also would like to know how to be available to change the class based on the field for example from:

class="notification attention png_bg  to class="notification error png_bg

With this current code i am getting something like:

error message 1 error message 2

regards.