Question

I’m using the jQuery validate plugin to validate a form. My problem is that the form is generated dynamically, so it doesn’t yet exist when the page first loads. I’m not sure how to do this, or if it can even be done. Here’s my code, which does work as long as I hard code the form.

$(document).ready(function() {
    var post_url = '##removed##';

    $("#form").validate({
        success: "valid",
        rules: {
            username: {
                required: true,
                minlength: 6,
                maxlength: 15,
                remote: {
                    url: post_url,
                    type: "post",
                    data: { type : 'username' }
                }
            },
            email: {
                required: true,
                email: true,
                remote: {
                    url: post_url,
                    type: "post",
                    data: { type : 'email' }
                }
            }
        },
        messages: {
            username: {
                remote: "Username taken. Please choose another."
            },
            email: {
                remote: "E-mail address taken. Please choose another."
            }
        }
    });

});

I have tried to come up with something using jQuery’s on() function, but nothing that I’ve tried has worked so far. Can what I’m attempting to accomplish even be done? The worst case scenario is that I hard code the form, but I’d like to avoid doing that if possible.

Thanks in advance …

Answer 1

I’m assuming the form gets loaded using an ajax connection. Have a callback to look for the form and call the validate() function after.

You could also attach an event listener using the DOM mutation events (DOMNodeInserted) and check each time to see if the node inserted to the DOM is the form you are waiting for and then run validate(). Hope this helps