Question

I use jQuery validate to validate a bunch of forms on a site that I’m working on.

On this site I clone some inputs depending on a select option selection. I want to validate these inputs, but when I do, only the first one gets validated.

I tried to put $('form').validate(); within the clone script, where a bunch of other scripts are placed (and works), but it still only validates the first.

What should I do?

Below is my clone script, where I believe a new validate() should be placed. Or what?

// Clone per number chosen
for (var i = 0; i < childrenCount; i++) {
    birthday
        .clone()
        .attr('name', birthday.attr('name') + count++ - 9)
        .appendTo('.childInputs')
        .children("input.childDD").attr('id', 'child' + count + 'DD')
        .next("input.childMM").attr('id', 'child' + count + 'MM')
        .next("input.childYYYY").attr('id', 'child' + count + 'YYYY')
        .parent().children('.noChild').html(count);

    $(this).parent().next(".linkedToPrev").slideDown('slow');
    $("input.yyyy").mask("9999",{placeholder:" "});
}

I will not post all the code because it’s pretty complex. If you don’t know, on the top of your heads, what might cause the problem, I will though.

Answer 1

If you are dynamically adding elements, and are using normal event binding methods with jQuery the new elements are not automatically bound unlesss you use the $.live() handler:

$('form').live('submit', function() {
   var $inputs = $('input', this); //this selects all inputs within the form
   //do validation
});

I’m sure you are doing something similar now, but that will bind for all existing form elements and all future form elements added. When a submit event fires the script will grab all existing input elements within the form firing the event, which you can then iterate through and validate.

Hope this is what you were looking for.

EDIT: Since someone revived this 4 year old post, mentioning .live() is deprecated here is the modern jQuery way of doing even delegation to document:

$(document).on('submit', 'form', function () {
    //...
});