javascript - 如何使用javascript验证动态行+选择的选择？

Question

我有下面的代码

<强> 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

我从未使用过JQBootstrapValidator，但您可以使用以下验证器之一:

• BootstrapValidator (不再维护)
• FormValidation (Bootstrapvalidator从v0.6.0开始的新名称，并且是一个商业产品)
• JQuery-validation 。

在你的 fiddle 中，当你生成选择字段时，你将Chosen插件应用到你的select字段，紧接着添加你的select > 字段到所使用的验证器，请参见以下代码:

# 使用 BootstrapValidator(v0.5.2 或 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()

然后调用验证器:

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

# 使用 FormValidation(v0.6.0 及更高版本)

$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()

然后调用验证器:

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

# 使用 JQuery 验证

$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()

然后调用验证器:

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