jQuery using .on and .validate must submit form twice to validate

Question

I am loading a form via ajax and usind the new .on() to load the jQuery validate plugin is not loaded before I press the submit a second time. I understand why I think. The

Answer 1

Per my comment

 $(document).ready(function(){
  $("#myform").on("submit",function(){
   $(this).validate();
  return false;
 });
});

Answer 2

I had something similar. here is how I resolved it.

I had the same issue: my goal: validate many forms with the same class:

my php:

form class="js-validate-itemForm" method="post" action="">
...
form class="js-validate-itemForm" method="post" action="">

my js:

$('.js-validate-itemForm').each(function () {
       $(this).validate({
           submitHandler: function (form, event) { 
               doActionOnItemform(form, event);
               return false;
           }
        });
    });

Answer 3

I think you have a mispelling..

Working example: http://jsfiddle.net/mFeww/4/

     $(document).ready(function(){
        $("#formID").on("submit",function(event){
            $("#myform").validate();
            event.preventDefault();
      })
});

HTML:

<form id="formID">

</form>

Answer 4

The on() function loads the validate on the form when I press submit. ... So what happens now is the form is not submitted but the errors only show when I press submit a second time.

You are correct. The plugin is not initialized on your form until you click submit the first time. This is because, with on(), you are simply attaching the plugin's initialization function to a submit event. No matter how you do this, delegate, bind, etc., your problem will be the same... you'll never properly initialize the plugin until after that first click.

So what happens now is the form is not submitted

Your preventDefault() is blocking the normal submit. You need to get rid of all this and simply call .validate() immediately after you construct the form's HTML.

Is there any way to fix this?

You must initialize the plugin (one time) immediately after you load the form with your ajax. Where is the code that does this? Try putting your .validate() function inside of the complete callback function of the ajax that loads your form. This will run .validate() once upon completion of the ajax.

Or if you use jQuery .load()...

$('#content').load('form_loader', function() {
    ('#myform').validate(); // initialize plugin after form is loaded
});

Without seeing your ajax code, the crude demo below was quickly constructed to only simulate this concept. Click the "test" button to load a form with ajax, which then initializes .validate() upon completion.

http://jsfiddle.net/dUmfK/

You can see the form is loaded into a div and ready to validate before the very first click.

Answer 5

You need to add a selector in the call to on to make a delegate instead of a regular bind:

$(document).on("submit", "#myform" function(event){
  $(this).validate();
  event.preventDefault();
});

If possible, bind the delegate to an element closer to the form than the entire document.