CODEWITHSUNDEEP
javascriptjqueryhtmljquery-validate
laviku
laviku

Reputation: 541

Why jquery validation is not working on appended elements?

I have a form and I want to add new elements as you can see in this fiddle I used append $('#cvfields').append(campos); to add this elements but the jquery validation plugin started to giving me problems. I found this in some answers related whith this question

$('#titulo_'+campo).rules('add', {'required': true});
$('#tipo_'+campo).rules('add', {'required': true});

But when I added .rules code I received this error

Uncaught TypeError: Cannot read property 'form' of undefined
$.extend.rules 
(anonymous function) 
x.event.dispatch 
v.handle

Hope you can help!

Upvotes: 2

Views: 5393

Answers (2)

Sparky
Sparky

Reputation: 98738

You have some issues with your code:

1) When you use the .rules('add') method on a selector of multiple elements, you must nest it inside a jQuery .each() or it won't be applied to all the matching elements.

$('.newinput').each(function() {
    $(this).rules('add', {
        'required': true
    });
});

However, you can probably skip .rules() entirely. See item #2 below.

2) You can totally forget about item #1 above since you're only trying to make these new fields required. Simply add a required="required" attribute (which I see you've already done) when you create them and you will not need to worry about the .rules('add') method at all. Alternatively, you could use class="required" instead, which is the method I chose for the demo below.

3) This is why nothing was working: Your newly added elements must also contain unique names. It's a requirement of the plugin that all form inputs need a name atribute. It's how the plugin keeps track of the elements, so they all need to be unique. However, as per your code, they do not. Your newly created elements all have the same exact name assigned to them as your existing elements. Fix it by adding a counter and incrementing it to the name each time you append to the form.

$(function () {
    validar();
    cvFields();
});

function validar() {
    $(".validate").validate({
        ....
    });
}

function cvFields() {
    var count = 0;
    $('#addcvfields').click(function (e) {
        e.preventDefault();
        count++;
        var total = $()
        var campos = '' +
            ....
            '<input name="profesorcv_titulo[' + count + ']" type="text" class="form-control required" placeholder="Titulo de Estudio o Experiencia">' +
            ....
            '<select name="profesorcv_tipo[' + count + ']" class="form-control required">' +
            ....
            '<textarea rows="3" name="profesorcv_descripcion[' + count + ']" class="form-control"  id="profesorcv_descripcion" placeholder="Describe Brevemente"></textarea>' +
            ....;
        $('#cvfields').append(campos);
    });
}

Upvotes: 2

kasper Taeymans
kasper Taeymans

Reputation: 7026

you get these problems because the added form elements where not in the DOM when your form validation plugin get initialized. you have to call your validation plugin again, after you've added new elements to the DOM.

EDIT: I just had a look at your fiddle code. your problem can be solved by first calling cvFields() and then validar();

$(function(){
    cvFields();
    validar();
});

If you first call validar(), the function will look in the DOM (document) if there are elements with the class ".validate". If there are elements with this class they'll get processed by the function. However all the elements that are added to the DOM after the validar() function won't get processed because they were not present in the DOM when the validar() function was called.

If you want to get the validating work after you added more items to validate you simply have to do validar(); again.

Upvotes: 0

Related Questions