如何验证动态字段(动态创建的字段) [英] How to validate dynamic fields (field created on the fly)

问题描述

我正在使用 FormValidation 插件，并且我有以下代码:

I'm using FormValidation plugin and I have this code:

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"元素是动态创建的，我需要在此新字段上执行验证，如何进行?我正在考虑以这段代码为起点，但是由于字段是动态创建的，所以不知道它是否会起作用.

As you can see the input type="checkbox" elements are created on the fly, I need to perform a validation on this new fields, how? I'm thinking to use this piece of code as start point but don't know if it will works since fields are dynamically created.

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

有什么建议吗?

根据答案执行测试

在阅读了添加动态字段的文档之后，我又有了另一个疑问.这是原始代码:

After read the docs for Adding dynamic field I comes with a second doubt. This is the original code:

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

好吗?由于添加动态字段包括这段代码，

All right? Since adding dynamic fields include this piece of code,

.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()中吗?我有点困惑，不知道该怎么办.这就是我的几句话:

Should I get ride of my code and put it inside the .on() on the validator itself? I'm a bit confused and don't know what to do. This is what I mean in a few words:

.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);
        }
    });
})

我当然需要将动态字段添加到验证器，但是这样正确吗?

Of course I need to add the field dynamic to the validator but it will be right on this way?

推荐答案

您可以使用AddField这样的方法:

You can use AddField method like this:

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

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

$element means your new element for validation, in this case your <input>.

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

更新#1

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

The key to solve your problem is to get the object collection which you just dynamic added.

所以:

.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的元素.

The jquery selector input means the <input> element, and [attr='val'] means the element which has attr attribute with value of val.

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

这篇关于如何验证动态字段(动态创建的字段)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！