Question

我有一个表单，我想添加新元素，你可以在这个fiddle中看到我使用append $('#cvfields').append(campos);来添加这些元素，但是jquery验证插件开始给我带来问题。我在一些与此问题相关的答案中找到了这个

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

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

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

希望你能帮忙！

Answer 1

您的代码存在一些问题：

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

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

但是，您可以完全跳过.rules()。见下面的第2项。

2）您可以完全忘记上面的第1项，因为您只是尝试创建这些新字段required。只需在创建required="required"属性（，我看到您已经完成）时添加它，您根本无需担心.rules('add')方法。或者，您可以使用class="required"代替，这是我为下面的演示选择的方法。

3）这就是为什么没有任何效果：您新添加的元素必须还包含唯一的names。 It's a requirement of the plugin that all form inputs need a name atribute。这是插件跟踪元素的方式，因此它们都需要是唯一的。但是，根据您的代码，他们没有。您新创建的元素都具有与现有元素分配的完全相同的name。通过添加计数器并在每次附加到表单时将其递增到name来修复它。

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

Answer 2

你得到了这些问题，因为在表单验证插件初始化时，添加的表单元素不在DOM中。在将新元素添加到DOM之后，您必须再次调用验证插件。

编辑：我刚刚看了你的小提琴代码。您的问题可以通过首先调用cvFields（）然后调用validar（）;

来解决

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

如果您第一次调用validar（），则该函数将查看DOM（文档）中是否存在类“.validate”的元素。如果有这个类的元素，它们将被函数处理。但是，在validar（）函数之后添加到DOM的所有元素都不会被处理，因为在调用validar（）函数时它们不存在于DOM中。

如果要在添加更多项目进行验证后获得验证工作，则只需执行validar（）;试。

为什么jquery验证不能处理附加元素？

2 个答案: