jquery validation plugin working ok first time you validate but not subsequent times -

i have following form added page via ajax

<script>     $(document).ready(function() {          jquery.validator.setdefaults({             errorplacement: function(error, element) {                  error.appendto('#invalid_' + element.attr('id'));             }         });          var validator = $("#login_form").validate({             rules: {                 user_email: {                   required: true,                   email: true                 },                 password: {                     required: true                 }             }         });     });  </script>  <form id="login_form"> <center><br/><br/><br/>     <div class="login_div">         <center><h3>log in</h3>         <table align="center" width="400px">             <tr><td class="input_td">email:</td><td class="textfield_td"><input type="text" class="textfield" id="user_email" name="user_email"/></td></tr>             <tr><td colspan="2" id="invalid_user_email"></td></tr>             <tr><td class="input_td">password:</td><td class="textfield_td"><input type="password" class="textfield" id="password" name="password"/></td></tr>             <tr><td colspan="2" id="invalid_password"></td></tr>             <tr><td colspan="2" class="error_text" id="login_error"></td></tr>         </table>         <input  type="button" onclick="check_login();" value="log in"/></center>     </div> </center> </form> 

the check_login method has structure: if($("#login_form").valid()) {do something} else {return;}

when click log in button first time form validates correctly e.g. if fields missing or invalid email supplied appropriate error messages shown. if click log in button again valid() method returns true if fields missing or there invalid email , no error messages shown.

thanks light can shed on this

edit: solution appears work login id of button

$("#login").click(function() {      validator.resetform();     if(validator.form()) {          alert('valid');      }     else {         return;     }   }); 

you do not need if($("#login_form").valid()) {do something} because plugin's built-in submithandler follows exact same logic.

as per documentation, submithandler is:

"callback handling actual submit when form valid."

(it's correct place put ajax required form submission.)

demo: http://jsfiddle.net/uxzh6/

$(document).ready(function () {      $('#login_form').validate({         rules: {             user_email: {                 required: true,                 email: true             },             password: {                 required: true             }         },         submithandler: function (form) {             // ajax go here             alert('valid form submitted'); // demo             return false;         }     });  }); 

---

your button:

<input type="button" onclick="check_login();" value="log in"/> 

you using jquery inline javascript rendered ugly , superfluous. onclick can replaced jquery click handler. however, in case, do not need click handlers @ since built-in submithandler captures click event. need change input type submit.

<input type="submit" value="log in"/> 

---

quote op:

"i have following form added page via ajax"

<script>     $(document).ready(function() {     ... 

the dom ready handler function, $(document).ready(), fires when dom constructed on normal page load. nothing when code loaded page ajax(). have not shown code writes page, if want initialize validate plugin, need move $('#login_form').validate({... code whatever code writes form's html.

$.ajax({     // code load form's html page     // initialize plugin here after ajax complete     complete: function() {         $('#login_form').validate({ ... });     }     .... 

---

and finally, please validate html of form. you're using deprecated code such <center></center> , <table align=.