How validate JQuery clone form

Question

In my work I used to answer this question:

How to validate Cloning a form using JQuery Validation?

I tried the following, but it didn't work:

    $(document).ready(function () {
    $(function () {
        var template = $('#attendees .attendee:first').clone(),
            attendeesCount = 1;
        var addAttendee = function () {
            attendeesCount++;
            var nativeTemplate = template.clone();
            var attendee = nativeTemplate.find(':input').each(function () {
                var newId = this.id.substring(0, this.id.length - 1) + attendeesCount;
                $(this).prev().attr('for', newId); // update label for (assume prev sib is label)
                this.name = this.id = newId; // update id and name (assume the same)
            }).end() // back to .attendee
                .attr('id', 'att' + attendeesCount) // update attendee id
                .prependTo('#attendees') // add to container
                .validate(
                    // rules
                );
        };
        $('.add').click(addAttendee); // attach event
    });
});

score 0 · Answer 1 · answered Jan 17 '14 at 21:02

Before you call validate again, you need to get rid of the old validator data attached to the cloned form.

So the end of your code would look like this:

           .prependTo('#attendees') // add to container
           .removeData('validator') //get rid of cloned validator
            .validate(
                // rules
            );

score 0 · Answer 2 · answered Sep 22 '17 at 06:56

0

Try сlone(true), it will attach event handlers to cloned objects, it may help.

answered Sep 22 '17 at 06:56

Дмитрий Завориин

27
1

score -1 · Answer 3 · edited Sep 26 '14 at 08:15

I used this approach:

//Clone the form
var clonedForm = $('.original-form').clone(true);

//Get original form & validator
var originalform = $('.original-form').find('form');
var originalValidator = originalform.data('validator');

//Set validator to cloned form in popup
originalValidator.currentForm = clonedForm;

//Re-Set the validator to the cloned form
clonedForm.data('validator', originalValidator);

//Now you can validate the clonedForm by calling "valid()".
$(clonedForm).valid()

Hope this helps.

How validate JQuery clone form

3 Answers3