Question

我想在动态添加到页面后验证bootstrap复选框

我的代码是

    <link rel="stylesheet" href="./css/bootstrap.min.css"/>
    <link rel="stylesheet" href="./css/formValidation.min.css"/>
    <script type="text/javascript" src="./js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="./js/formValidation.min.js"></script>
    <script type="text/javascript" src="./js/validation/bootstrap.min.js"></script>

<form id="checkboxForm" method="post" class="form-horizontal">
    <div class="form-group" id="checkboxes">
        <!--checkbox code here -->
    </div>
</form>

<script>
$(document).ready(function() {
    $('#checkboxForm').formValidation({
        framework: 'bootstrap',
        icon: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            'languages[]': {
                validators: {
                    choice: {
                        min: 2,
                        max: 3,
                        message: 'Please choose %s - %s programming languages you are good at'
                    }
                }
            }
        }
    });
    var dynamic = '<label class="col-xs-3 control-label">Programming Languages</label>';
        dynamic += '<div class="col-xs-6">';
        dynamic += '<div class="checkbox">';
        dynamic += '<input type="checkbox" name="languages[]" value="net" id="netCheckbox" class="styled" />';
        dynamic += '<label for="netCheckbox">.Net</label>';
        dynamic += '</div>';
        dynamic += '<div class="checkbox">';
        dynamic += '<input type="checkbox" name="languages[]" value="java" id="javaCheckbox" class="styled" />';
        dynamic += '<label for="javaCheckbox">Java</label>';
        dynamic += '</div>'
        dynamic += '<div class="checkbox">';
        dynamic += '<input type="checkbox" name="languages[]" value="c" id="cCheckbox" class="styled" />';
        dynamic += '<label for="cCheckbox">C/C++</label>';
        dynamic += '</div>';
        dynamic += '</div>';

        $("#checkboxes").html(dynamic);
        var checkbox_inputs =  $("#checkboxes").find("input[name='languages[]']");
        $('#checkboxForm').formValidation('addField', checkbox_inputs);
});
</script>

这里我试图验证复选框至少选择2 项目。但是当我选择2个或更多复选框时，它不会被验证。如图所示

我不希望代码写在主要内容中。我想动态添加许多并使用bootstrap验证器进行验证。什么是正确的方法？

Answer 1

使用.validator('update')方法，您只需通知验证者在添加动态字段后需要验证新字段。

更多参考：Bootstrap Validator

如何验证动态添加的引导字段

1 个答案: