javascript - Validate Dynamic input filed with "formvalidation.io" -
i using plugin form validation validate form. , plugin working awesome.
facing issue in validating dynamically generated inputs.
below code used generate input fields dynamically
$("#countaccmp").change(function() { var selval = $(this).val(); $("#textboxdiv").html(''); if(selval > 0) { for(var = 1; i<= selval; i++) { $("#textboxdiv").append('<input type="text" name="accmp'+i+'" id="accmp'+i+'" class="form-control " />'); } } })
i tried validating plugin below:
$('#form').formvalidation({ //--------- plugin validator method -----------// }) .on('change', '[name="countaccmp"]', function(e) { //---- wrote validation here, works(only on change) form getting submitted 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, works form getting submitted after error ----// same validation above })
please let me know solution.
you should add inputs plugin in order validated.
to so, use addfield
method, see bellow:
$("#countaccmp").change(function () { var selval = $(this).val(); $("#textboxdiv").html(''); if (selval > 0) { (var = 1; <= selval; i++) { var input = '' + '<div class="form-group">' + ' <label class="col-sm-3 control-label" for="accmp' + + '">accmp ' + + '</label>' + ' <div class="col-sm-5">' + ' <input type="text" name="accmp' + + '" id = "accmp' + + '" class = "form-control " / >' + ' </div>' + '</div>'; $("#textboxdiv").append(input); $('#defaultform').formvalidation('addfield', 'accmp' + i, { validators: { // here, add field validators. } }); } } });
demo:
references:
- addfield documentation: http://formvalidation.io/api/#add-field
- example using
addfield
: http://formvalidation.io/examples/adding-dynamic-field/
Comments
Post a Comment