1

I have a form that I add with Ajax and use the jQuery Validate. I delegate associate with .on() but this does not attached to the form.

Not sure what I might have missed and there is very little details about using Validate.js with a dynamic form

$(document).ready(function(){
    $("body").on("validate", "#contactForm", function() {
        $('#contactForm').validate({
          ....
        });                    // <- end '.validate()'
    });
});
Sparky
  • 98,165
  • 25
  • 199
  • 285
Keith Power
  • 13,891
  • 22
  • 66
  • 135
  • 1
    [There is no such `"validate"` event as part of jQuery](http://api.jquery.com/category/events) that you can delegate with `.on()`. You can only call `.validate()` immediately after loading the form's HTML. Show the code that actually loads the form into the page. – Sparky Mar 09 '15 at 18:13
  • The form is loaded through ajax as part of the smoothState.js Pjax plugin. It is just plain html. smoothState.js loads the entire of the page with the form as part of that. – Keith Power Mar 09 '15 at 18:50
  • I don't know what else to tell you. You can only attach/call `.validate()` on a form that already exists in the DOM. It cannot be delegated. – Sparky Mar 09 '15 at 18:54
  • I added the [tag:smoothstate.js] tag to your post, but I think the smoothState plugin is a critical detail that should have been mentioned in the OP. Thanks. – Sparky Mar 09 '15 at 19:03
  • Since smoothState.js is more or less a pre-fetch ajax I though ajax was the important part. Fair point though, thanks – Keith Power Mar 09 '15 at 19:07
  • I have updated the question since as you mention the `"validate"` is not part of the `.on()` I have added `submit` instead as I would have thought it would work like the `click` event of a button – Keith Power Mar 09 '15 at 19:23
  • That is even worse! That's the absolute most common mistake with using this plugin... the `.validate()` method is used ONE time for initializing the plugin. It NEVER belongs inside of a `submit` or even a `click` handler. You MUST only call `.validate()` on DOM ready... **in your case**, simply *after* the HTML is loaded by smoothState plugin. – Sparky Mar 09 '15 at 19:26
  • I rolled back the question so that the answer makes sense to new readers. Thanks. – Sparky Mar 09 '15 at 19:42

1 Answers1

1

The basic premise of the question is flawed...

$("body").on("validate", ...

There is no such "validate" event as part of jQuery that you can delegate with .on(). You can only call the .validate() method immediately after loading the form's HTML, which initializes the plugin.

You can only attach/call .validate() onto a form that already exists in the DOM. In other words, it cannot be delegated.

Referring to the documentation for the smoothState plugin, there is an option called callback that is run "after the new content has been injected into the page".

This is where you would have to call the .validate() method.

callback : function(url, $container, $content) { // <- fires AFTER page (form) is loaded
    $('#contactForm').validate({ // <- initializes the plugin on your form
        ....
    }); 
}
Sparky
  • 98,165
  • 25
  • 199
  • 285
  • Using the .on() with click events is straight forward and I thought it would be the same with a form. It is obviously more complicated then that. The page that the form is only can also be loaded directly with the URL. Would you suggest having it with the $(document).ready and the smoothState.js callback? – Keith Power Mar 09 '15 at 19:12
  • @KeithPower, you do not need a DOM ready handler inside there since the `callback` option presumably only fires AFTER the content has been fully loaded. – Sparky Mar 09 '15 at 19:17
  • Yes but I can load the content directly without Ajax if I go to the /contact.html page. If I am on the homepage can click the contact link then smoothState.js load it as Ajax. So the content get called both ways unfortunately. I could create a function and call it from both places? – Keith Power Mar 09 '15 at 19:27
  • @KeithPower, I cannot actually see what you're talking about. I can only explain how it works and what you **must** do to make it work. `.validate()` is the method of INITIALIZING the plugin.... it can only be called ONE time AFTER the form exists/loaded into the DOM. It NEVER belongs inside of a `submit` handler. – Sparky Mar 09 '15 at 19:31
  • @KeithPower, Can you let me know, how did you solve this? I'm facing a similar problem. Thanks – Pawan Kumar Sep 26 '15 at 21:42
  • @PawanKumar, he probably solved it by following this answer. If you have a problem, please post a new question rather than hijacking comments on an accepted answer. Thanks. – Sparky Sep 27 '15 at 15:23