jQuery validator and datepicker click not validating

Question

I am using jquery validator to validate text inputs. The problem I have is, if I click submit it displays all error message correctly. However, on the datepicker input, to clear the error message I have to select the datepicker twice. ie; 1 click to select and it inputs the data correctly. 2nd click to clear the error message.

I read somewhere about using an 'on' event on the datepicker, so I tried that, but it made no difference. I don't think that is coded correctly. I am assuming that the invalid and success classes are part of the validator script. Worth a try.

What could be happening here. Thanks

Sciprt code

<script type="text/javascript"> $(function() {         $("#datepicker").datepicker({             changeMonth: true,             changeYear: true,             yearRange: '2011:2037',             dateFormat: 'dd/mm/yy',             minDate: 0,             defaultDate: null         }).on('changeDate', function(ev) {     if($('#datepicker').valid()){        $('#datepicker').removeClass('invalid').addClass('success');        }  });      }); </script> 

html code

<label for"datepicker">    <input id="datepicker" name="datepicker" type="text" /> </label> 

validator relevant code

Rules/Message section

 datepicker:     {         required: true,         date: true     },   datepicker:     {         required: " * required: You must enter a destruction date",         date: "Can contain digits only"     } 

Answer 1

Quote OP:

"I have to select the datepicker twice. ie; 1 click to select and it inputs the data correctly. 2nd click to clear the error message."

That's because validation is normally triggered on keyup and blur events. Since you're using a date-picker to interact with the field, rather than the keyboard, you're interfering with the normal triggering events.

Your code is supposed to compensate, but is over-kill...

$(function() {         $("#datepicker").datepicker({ ... }) .on('changeDate', function(ev) {     if($('#datepicker').valid()){        $('#datepicker').removeClass('invalid').addClass('success');        }  });     }); 

You only need to call the .valid() method on the field whenever the value changes.

$(function() {     $("#datepicker").datepicker({ ... })         .on('changeDate', function(ev) {             $(this).valid();  // triggers the validation test             // '$(this)' refers to '$("#datepicker")'         }); }); 

However, this is basically the same as you had before.

What is changeDate supposed to be? Is this something defined by your datepicker plugin? That's not a standard jQuery event, so likely the whole problem. Try the standard change event instead....

$(function() {     $("#datepicker").datepicker({         changeMonth: true,         changeYear: true,         yearRange: '2011:2037',         dateFormat: 'dd/mm/yy',         minDate: 0,         defaultDate: null     }).on('change', function() {         $(this).valid();  // triggers the validation test         // '$(this)' refers to '$("#datepicker")'     }); }); 

Answer 2

Sparky's answer worked great for me, the only thing I would change is instead of using the id, I just used the jquery this in the on function, ie:

    .on('change', function() {         $(this).valid();       }); 

That just makes it a little more general.. -D