1

我正在使用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'
                }
            }
        }
    }
});

有什么建议吗？

根据答案执行测试

在阅读了添加动态字段的文档后，我提出了第二个疑问。这是原始代码：

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

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

4

1 回答 1

4

你可以使用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/

于 2015-01-18T08:33:03.573 回答