Jquery Validation - Validate several time a field in a hidden area

Question

I\'m trying to add some validation on a form to add a contact and I can\'t seem to make it right. My form is hidden (with CSS) when you load the page and you have to click o

Answer 1

It's not working correctly because you've wrapped the .validate() function within a click handler. This means the validation initializes only after the click when it should initialize upon loading of the page.

$('#btn-report_add').click(function(e) {
        e.preventDefault();
        // Validate new email form
        $("#weeklyReportsForm").validate({ // <- this only initializes validation after the click
        ...

Instead, this is more like how it should be done (see source code of official demos)...

Immediately initialize the Validation plugin on your form:

 $("#weeklyReportsForm").validate({

     // validation rules and options

     submitHandler: function(form) {
         // optional- stuff to do upon form submission
     }
 ...

 });

Bind your form's submit to the click of your element:

 $('#btn-report_add').click(function(e) {

        e.preventDefault();

        // your other logic for click

        $("#weeklyReportsForm").submit();

 });

See: How do I get my jQuery Validator Code to run a second time after a form has already been submitted?