2

我有一个表单，我想添加新元素，正如你在这个小提琴中看到的那样，我使用 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

希望你能帮忙！

4

2 回答 2

2

您的代码有一些问题：

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）这就是为什么没有任何工作：您新添加的元素还必须包含 unique names。 所有表单输入都需要一个name属性是插件的要求。这就是插件跟踪元素的方式，因此它们都必须是唯一的。但是，根据您的代码，它们没有。您新创建的元素都具有与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);
    });
}
于 2013-09-19T21:25:51.103 回答
0

您会遇到这些问题，因为当您的表单验证插件被初始化时，添加的表单元素不在 DOM 中。在向 DOM 添加新元素后，您必须再次调用验证插件。

编辑：我刚刚看了你的小提琴代码。您的问题可以通过先调用 cvFields() 然后调用 validar() 来解决；

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

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

如果您想在添加更多项目进行验证后获得验证工作，您只需执行验证器（）；再次。

于 2013-09-19T19:31:17.433 回答