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属性值为val的元素。

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

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

1 个答案: