CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapformvalidation-plugin
ReynierPM
ReynierPM

Reputation: 18660

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

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

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

Any advice?

Executing test based on answer

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

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?

Upvotes: 1

Views: 5435

Answers (1)

Bandon
Bandon

Reputation: 809

You can use AddField method like this:

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

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

Check this doc: http://formvalidation.io/examples/adding-dynamic-field/

Update#1

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

So:

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

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

Here's a sample:http://jsfiddle.net/994hL0q7/

Upvotes: 4

Related Questions