如何验证动态字段（动态创建的字段）

Question

我正在使用 FormValidation 插件并且我有这个代码：

data.entities.forEach(function (value, index, array) {
    html += '<tr>';
    html += '<td><input type="checkbox" name="norm[]" id="' + value.id + '" value="' + value.id + '"></td>';
    html += '<td>' + value.code + '</td>';
    html += '<td>' + value.name + '</td>';
    html += '<td>' + value.ct + '</td>';
    html += '</tr>';
});

$("#resultadoNormaBody").html(html);

如您所见，input type="checkbox" 元素是动态创建的，我需要对这个新字段执行验证，怎么做？我正在考虑使用这段代码作为起点，但不知道它是否有效，因为字段是动态创建的。

$('#normasForm').formValidation({
    framework: 'bootstrap',
    err: {
        container: 'tooltip'
    },
    row: {
        selector: 'td'
    },
    icon: {
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
    },
    fields: {
        'norm[]': {
            validators: {
                notEmpty: {
                    message: 'Please choose one at least'
                }
            }
        }
    }
});

有什么建议吗？

正在根据答案执行测试

阅读 Adding dynamic field 的文档后，我又产生了第二个疑问。这是原代码：

$('#btnBuscarNorma').on('click', function (e) {
    e.preventDefault();

    $.post(Routing.generate('filterNorm'), $('#normSearch').serialize(), 'json').done(function (data, textStatus, jqXHR) {

        if (data.entities.length > 0) {
            var html = '';
            data.entities.forEach(function (value, index, array) {
                html += '<tr>';
                html += '<td><input type="checkbox" name="norm[]" id="' + value.id + '" value="' + value.id + '"></td>';
                html += '<td>' + value.code + '</td>';
                html += '<td>' + value.name + '</td>';
                html += '<td>' + value.ct + '</td>';
                html += '</tr>';
            });

            $("#resultadoNormaBody").html(html);
        }
    });
});

好吗？由于添加动态字段包含这段代码，

.on('click', '.removeButton', function() {
    var $row    = $(this).parents('.form-group'),
        $option = $row.find('[name="option[]"]');

    // Remove element containing the option
    $row.remove();

    // Remove field
    $('#surveyForm').formValidation('removeField', $option);
})

我应该摆脱我的代码并将其放在验证器本身的 .on() 中吗？我有点迷茫，不知道该怎么办。这就是我的意思：

.on('click', '#btnBuscarNorma', function() {
    $.post(Routing.generate('filterNorm'), $('#normSearch').serialize(), 'json').done(function (data, textStatus, jqXHR) {

        if (data.entities.length > 0) {
            var html = '';
            data.entities.forEach(function (value, index, array) {
                html += '<tr>';
                html += '<td><input type="checkbox" name="norm[]" id="' + value.id + '" value="' + value.id + '"></td>';
                html += '<td>' + value.code + '</td>';
                html += '<td>' + value.name + '</td>';
                html += '<td>' + value.ct + '</td>';
                html += '</tr>';
            });

            $("#resultadoNormaBody").html(html);
        }
    });
})

当然我需要将字段动态添加到验证器，但这样就可以了吗？

Answer 1

您可以像这样使用 AddField 方法：

$('#formID').formValidation('addField', $element);

$element 表示您要验证的新元素，在本例中是您的 <input>.

查看此文档：http://formvalidation.io/examples/adding-dynamic-field/

更新#1

解决你的问题的关键是获取你刚刚动态添加的对象集合。

所以：

.on('click', '#btnBuscarNorma', function() {
    $.post(Routing.generate('filterNorm'), $('#normSearch').serialize(), 'json').done(function (data, textStatus, jqXHR) {

        if (data.entities.length > 0) {
            var html = '';
            data.entities.forEach(function (value, index, array) {
                html += '<tr>';
                html += '<td><input type="checkbox" name="norm[]" id="' + value.id + '" value="' + value.id + '"></td>';
                html += '<td>' + value.code + '</td>';
                html += '<td>' + value.name + '</td>';
                html += '<td>' + value.ct + '</td>';
                html += '</tr>';
            });

            $("#resultadoNormaBody").html(html);

            //get objects
            var inputs =  $("#resultadoNormaBody").find("input[name='norm[]']");
            //assume your form id is surverForm
            $('#surveyForm').formValidation('addField', inputs);
        }
    });
})

jquery选择器input表示<input>元素，[attr='val']表示具有attr属性且值为[=18=的元素].

这是一个示例：http://jsfiddle.net/994hL0q7/

如何验证动态字段（动态创建的字段）

How to validate dynamic fields (field created on the fly)

javascript

jquery

twitter-bootstrap

formvalidation-plugin