为什么jquery验证不能处理附加元素？ [英] Why jquery validation is not working on appended elements?

问题描述

我有一个表单，我想添加新的元素，你可以在这个小提琴我使用追加 $（'#cvfields'）。append（campos）; 来添加这些元素，但jquery验证插件开始给我带来问题。我在一些答案中发现了这个问题

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});

但是当我添加 .rules 代码我收到此错误

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

希望你能帮忙！

推荐答案

你的代码存在一些问题：

You have some issues with your code:

1）当你在多个元素的选择器上使用 .rules（'add'）方法时，你必须将它嵌套在jQuery 中.each（）或它不会应用于所有匹配元素。

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
    });
});

但是，您可以跳过 .rules（）完全。请参阅下面的第2项。

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

2）您可以完全忘记上面的第1项，因为您只是想要创建这些新字段 。只需在创建时添加 required =required属性（我看到你已经完成），你就不用担心了关于 .rules（'add'）方法。或者，您可以使用 class =required，这是我为下面的演示选择的方法。

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）这就是为什么没有任何效果：您新添加的元素必须还包含唯一的名称。 插件的要求是所有表单输入都需要 name 属性。这是插件跟踪元素的方式，因此它们都需要是唯一的。但是，根据您的代码，他们没有。您新创建的元素都具有与现有元素相同的名称。通过添加计数器并在每次附加到表单时将其递增到名称来修复它。

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);
    });
}

这篇关于为什么jquery验证不能处理附加元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！