twitter bootstrap 3 - How to validate dynamic row + chosen select with javascript? -

i have code below

http://jsfiddle.net/manojgolty/65xcgaq0/1/

    // chosenify every multiple select dom elements class 'chosen'     $('.chosen-selects').chosen({         width: '100%',         allow_single_deselect : true,         no_results_text : 'oops, no results found - '     }); 

---

here problem. <i>how validate dynamically created row using javascript..  please provide solution in jquery well.  guidance.</i> 

i've never used jqbootstrapvalidator, can use 1 of following validators instead:

• bootstrapvalidator (not mantained anymore)
• formvalidation (the new name of bootstrapvalidator v0.6.0, , it's commercial product)
• jquery-validation.

in fiddle, when generate select field, applied chosen plugin select field, after add select field used validator, see following code:

# using bootstrapvalidator (v0.5.2 or 0.5.3)

$clone.find('select').each(function () {     // ...     $(this).chosen({         // ...     });     // <=== here add field bootstrapvalidator     // revalidate field when changed     $(this).change(function(e) {         $('#yourform').bootstrapvalidator('revalidatefield', $(this));     });     // add using `rules` method     $('#yourform').bootstrapvalidator('addfield', $(this), {         validators: {             notempty: {                 message: 'please select option'             }         }     });     // ===> }).end() 

and call validator:

$('#yourform')     .find('.chosen-selects')         .chosen({             width: '100%',             allow_single_deselect : true,             no_results_text : 'oops, no results found - '         })         // revalidate field when changed         .change(function(e) {             $('#yourform').bootstrapvalidator('revalidatefield', 'your_field_name');         })         .end()     .bootstrapvalidator({         excluded: ':disabled', // <=== make sure use option         feedbackicons: {             valid: 'glyphicon glyphicon-ok',             invalid: 'glyphicon glyphicon-remove',             validating: 'glyphicon glyphicon-refresh'         },         fields: {             your_field_name: {                 validators: {                     notempty: {                         message: 'please choose option'                     }                 }             }         }     }); 

# using formvalidation (v0.6.0 , above)

$clone.find('select').each(function () {     // ...     $(this).chosen({         // ...     });     // <=== here add field formvalidation     // revalidate field when changed     $(this).change(function(e) {         $('#yourform').formvalidation('revalidatefield', $(this));     });     // add using `rules` method     $('#yourform').formvalidation('addfield', $(this), {         validators: {             notempty: {                 message: 'please select option'             }         }     });     // ===> }).end() 

and call validator:

$('#yourform')     .find('.chosen-selects')         .chosen({             width: '100%',             allow_single_deselect : true,             no_results_text : 'oops, no results found - '         })         // revalidate field when changed         .change(function(e) {             $('#yourform').formvalidation('revalidatefield', 'your_field_name');         })         .end()     .formvalidation({         framework: 'bootstrap',         excluded: ':disabled', // <=== make sure use option         icon: {             valid: 'glyphicon glyphicon-ok',             invalid: 'glyphicon glyphicon-remove',             validating: 'glyphicon glyphicon-refresh'         },         fields: {             your_field_name: {                 validators: {                     notempty: {                         message: 'please choose option'                     }                 }             }         }     }); 

# using jquery-validation

$clone.find('select').each(function () {     // ...     $(this).chosen({         // ...     });      // <=== here add field jquery-validation     // revalidate field when changed     $(this).change(function(e) {         $(this).valid();     });     // add using `rules` method     $(this).rules( "add", {         required: true,         messages: {             required: "please select option"         }     });     // ===> }).end() 

and call validator:

$('#yourform')     .find('.chosen-select')         // revalidate field when changed         .change(function(e) {             $(this).valid();         })         .end()     .validate({         ignore: ":hidden:not(select)", // <=== make sure use option         rules: {             your_initial_select_field: {                 required: true             }         },         messages: {             your_initial_select_field: {                 required: 'please select option'             }         }     });