JQuery Form Validation Not working on newly created elements

Question

Hi there

Am having a few issues with the Jquery Validation plug in, and wondering if anyone can assist.

At the moment, the plug in works with any form elements currently on the page

    $("#addRelease").validate({
     submitHandler: function(form) {
     form.submit();
     }
   });

However if I dynamically create a form on a button click, the Jquery Validation plug in will not work for this newly created element.

    // Add release form
$(function(){
$('body#true #releases p a').click(function(){
         // Grab form using Jquery
        $.get('http://localhost:8500/mxRestore/views/viewlets/forms/ajax/a_addRelease.cfm?name_art='+name_art, function(data) { 
        // Place form returned via Jquery on page in formWrapper div        
        $('#formWrapper').html(data);
    });

    return false 
    });


});

Has anyone run into this issue previously and know of a work around?

Many thanks

Answer 1

This is because $("#addRelease").validate adds event Handlers to your HTML Elements the time it is called. You have to call it again after inserting new elements.

Answer 2

Hard to tell without seeing your code, but you might need to bind the "validate()" method after you have inserted the html into your page because the #addRelease element can't be found by jQuery until the user initiates the ajax call (by clicking) which then adds that element to the page.

// Add release form
$(function(){
    $('body#true #releases p a').click(function(){
        // Grab form using Jquery
        $.get('http://localhost:8500/mxRestore/views/viewlets/forms/ajax/a_addRelease.cfm?name_art='+name_art, function(data) { 
            // Place form returned via Jquery on page in formWrapper div        
            $('#formWrapper').html(data);
            $("#addRelease").validate({
                submitHandler: function(form) {
                    form.submit();
                  }
            });
        });
        return false;
    });
});