jQuery Validator Plug In - trigger from within a function

Question

I am having trouble validating a long form that is loaded via AJAX after the document is loaded. Using the standard validation syntax, the validator looks for my form in the document before it exists and therefore gives me an error:

$(document).ready(function(){
   $("#mainForm").validate();
});

firebug responds with:

nothing selected, can't validate, returning nothing

I tried putting the $("mainForm").validate(); in a function then calling the function with the onSubmit event from the form but no luck:

function validate() {
  $("mainForm").validate();
};

----------

<form id="mainForm" onSubmit="validate();">
   ...
</form>

Thoughts?

Some additional info for @Chris:

I have a page that is dynamically creating a form based on many different modules. The user picks the module(s) that apply to them then the form updates with that information to fill in. So when the user clicks on a link to load a module the loadSection(); function is called. This is what the loadSection(); function looks like:

function loadSection(id, div, size, frame) {
  var url = "loadSection.php?id=" + id + "&size=" + size + "$frame=" + frame;
  $.get(url,
    function(data){
      $(div).append(data);
    });
}

If I put the `$(#mainForm).validate();' in the callback of this function, it has the potential to get called every time a new module is inserted. Which may be good, or may be bad, I'm not sure how the validation will take to be called multiple times on the same form, even if the fields of the form have changed.

Thoughts?

Chris Sobolewski · Accepted Answer · 2012-02-29 18:30:43Z

1

You've likely got the problem right. If the form doesn't exist in the DOM at document.ready(), then nothing will be bound.

Since you're using JQuery, I presume the form is added using the jquery $.ajax (or similar) function. The most straightforward solution would be just to add $("#mainForm").validate(); to the callback function of the AJAX request. If you're not using JQUery ajax, please post the code that's adding the form, and we can help you out further.

answered Feb 29, 2012 at 18:30

Chris Sobolewski

13k13 gold badges65 silver badges97 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jlommori Over a year ago

I updated the original question with some more information that may explain a little more. Thanks!

uday · Accepted Answer · 2012-02-29 18:13:11Z

0

you have to specify the class definition to element as required for it to validate that particular element in the form. But I guess you are not having it anywhere so its showing like that.

for example if you want to validate the email:

   <p>
     <label for="cemail">E-Mail</label>
     <em>*</em><input id="cemail" name="email" size="25"  class="required email" />
   </p>

answered Feb 29, 2012 at 18:13

uday

8,7704 gold badges33 silver badges55 bronze badges

Comments

charlietfl · Accepted Answer · 2012-02-29 18:23:29Z

0

Simple mistake in selector "mainform" is not a valid selector. Add "#" prefix if it is an ID

EDIT: Also notice you have another validate call inline , remove that one

edited Feb 29, 2012 at 18:23

answered Feb 29, 2012 at 18:14

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Collectives™ on Stack Overflow

jQuery Validator Plug In - trigger from within a function

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related