jquery validate on elements not yet created

Question

I\'m wondering if it\'s possible to have the jQuery Validator plugin validate elements that don\'t yet exist in the dom when the rules are initially setup.

Calling t

Answer 1

Here is how I handled this. First I created my validation object.

    var myvalidations = {};
    myvalidation.registerform = function() { $("#registerform").validate({
            submitHandler: function(form) {
                $(form).ajaxSubmit(optionspersonal); 
                //submitReg();
            },
                    rules: {
                firstname: {
                     required: true,
                     minlength: 5,
                     maxlenght: 22
                },
                    messages: {
                             firstname: {
                                 required: "Tell us what to call you by.",
                     minlength: "Your username must consist of at least 5 characters"
                             }
                     }
             });
        }

Now, whenever you create your form make sure it has an ID on it or somewhat to reference it and simply call your function right after you create it.

    //create my content
    $('.content').html('--fields etc--');
    //add validation
    myvalidation.registerform();

Any further suggestions welcome; but I think basically this is the right approach.

Answer 2

Hey not sure if this is an unpolite hack but it worked for me. Before this, I was doing an each() on the selector and running into the same issue you're having with newly created, Ajaxed elements.

Mouseover event on live seems to have done the trick, granted ur not being crazy with your css:

// >>> MSG/Comment form validator, now and forever...  
    $('form.streamForms').live('mouseover', function(){
        $(this).validate({
            rules: {
                text: "required"

            },
            messages: {
                text: " "
            }
        });    
    });

Hope it helps!

Answer 3

You will want to look into jQuery 1.3's new Live Events

Answer 4

Okay, try two. What is adding your elements dynamically? Can't you just place the .Rules("add", ) to the same code?