How to validate dynamic row + chosen select with javascript?

Question

I have the code below

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

    // Chosenify every multiple select DOM elements with class 'chosen'
    $('.chosen-selects').chosen({
        width: '100%',
        allow_single_deselect : true,
        no_results_text : 'Oops, No Results Found for - '
    });

---

Here is the problem.
<i>how to validate the dynamically created row using javascript..

Please provide solution even in the jquery as well.

Thanks for your guidance.</i>

Answer 1

I've never used JQBootstrapValidator, but you can use one of those following validators instead:

• BootstrapValidator (not mantained anymore)
• FormValidation (the new name of Bootstrapvalidator from v0.6.0, and it's a commercial product)
• JQuery-validation.

In your fiddle, when you generate your select field, you applied the Chosen plugin to your select field, just after that add your select field to the used validator, see following code:

# Using BootstrapValidator (v0.5.2 or 0.5.3)

$clone.find('select').each(function () {
    // ...
    $(this).chosen({
        // ...
    });
    // <=== Here add your field to BootstrapValidator
    // Revalidate your field when it is changed
    $(this).change(function(e) {
        $('#yourForm').bootstrapValidator('revalidateField', $(this));
    });
    // Add it using the `rules` method
    $('#yourForm').bootstrapValidator('addField', $(this), {
        validators: {
            notEmpty: {
                message: 'Please select an option'
            }
        }
    });
    // ===>
}).end()

And then call the validator:

$('#yourForm')
    .find('.chosen-selects')
        .chosen({
            width: '100%',
            allow_single_deselect : true,
            no_results_text : 'Oops, No Results Found for - '
        })
        // Revalidate your field when it is changed
        .change(function(e) {
            $('#yourForm').bootstrapValidator('revalidateField', 'your_field_name');
        })
        .end()
    .bootstrapValidator({
        excluded: ':disabled', // <=== make sure to use this option
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            your_field_name: {
                validators: {
                    notEmpty: {
                        message: 'Please choose an option'
                    }
                }
            }
        }
    });

# Using FormValidation (v0.6.0 and above)

$clone.find('select').each(function () {
    // ...
    $(this).chosen({
        // ...
    });
    // <=== Here add your field to FormValidation
    // Revalidate your field when it is changed
    $(this).change(function(e) {
        $('#yourForm').formValidation('revalidateField', $(this));
    });
    // Add it using the `rules` method
    $('#yourForm').formValidation('addField', $(this), {
        validators: {
            notEmpty: {
                message: 'Please select an option'
            }
        }
    });
    // ===>
}).end()

And then call the validator:

$('#yourForm')
    .find('.chosen-selects')
        .chosen({
            width: '100%',
            allow_single_deselect : true,
            no_results_text : 'Oops, No Results Found for - '
        })
        // Revalidate your field when it is changed
        .change(function(e) {
            $('#yourForm').formValidation('revalidateField', 'your_field_name');
        })
        .end()
    .formValidation({
        framework: 'bootstrap',
        excluded: ':disabled', // <=== make sure to use this option
        icon: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            your_field_name: {
                validators: {
                    notEmpty: {
                        message: 'Please choose an option'
                    }
                }
            }
        }
    });

# Using JQuery-validation

$clone.find('select').each(function () {
    // ...
    $(this).chosen({
        // ...
    });

    // <=== Here add your field to Jquery-validation
    // Revalidate your field when it is changed
    $(this).change(function(e) {
        $(this).valid();
    });
    // Add it using the `rules` method
    $(this).rules( "add", {
        required: true,
        messages: {
            required: "Please select an option"
        }
    });
    // ===>
}).end()

And then call the validator:

$('#yourForm')
    .find('.chosen-select')
        // Revalidate your field when it is changed
        .change(function(e) {
            $(this).valid();
        })
        .end()
    .validate({
        ignore: ":hidden:not(select)", // <=== make sure to use this option
        rules: {
            your_initial_select_field: {
                required: true
            }
        },
        messages: {
            your_initial_select_field: {
                required: 'Please select an option'
            }
        }
    });