Gags Gags - 3 months ago 9
Javascript Question

Validate Dynamic input filed with "formvalidation.io"

I am using Plugin Form Validation to validate the form. And this plugin is working awesome.

But i am facing issue in validating dynamically generated inputs.

Below code is used to generate input fields dynamically

$("#countaccmp").change(function() {
var selVal = $(this).val();
$("#textboxDiv").html('');
if(selVal > 0) {
for(var i = 1; i<= selVal; i++) {
$("#textboxDiv").append('<input type="text" name="accmp'+i+'"
id="accmp'+i+'" class="form-control " />');
}
}
})


I tried validating with plugin as below:

$('#form').formValidation({
//--------- Plugin Validator Method -----------//
})
.on('change', '[name="countaccmp"]', function(e) {
//---- Wrote validation here, It works(only on change) but form is getting submitted
even after error ----//
$('.dynDiv').each(function(){
var input = $(this).children('input');
var dynField =
($(this).find("input[name^='accmp']").attr('name'));

if(input.val() == '' || input.val() == undefined){
alert("Error");
return false;
}
})
.on('success.form.fv', function(e) {
//---- Wrote validation here, It works but form is getting
submitted even after error ----//
Same Validation As above
})


Please let me know solution.

Answer

You should add your inputs to the plugin in order to be validated.

To do so, use the addField method, see bellow:

$("#countaccmp").change(function () {
    var selVal = $(this).val();
    $("#textboxDiv").html('');
    if (selVal > 0) {
        for (var i = 1; i <= selVal; i++) {
            var input = ''
                + '<div class="form-group">'
                + '    <label class="col-sm-3 control-label" for="accmp' + i + '">Accmp ' + i + '</label>'
                + '    <div class="col-sm-5">'
                + '        <input type="text" name="accmp' + i + '" id = "accmp' + i + '" class = "form-control " / >'
                + '    </div>'
                + '</div>';
            $("#textboxDiv").append(input);
            $('#defaultForm').formValidation('addField', 'accmp' + i, {
                validators: {
                    // Here, add your field validators.
                }
            });
        }
    }
});

Demo:

References: