Question

我将使用bootstrapvalidator，因为我正在使用bootstrap。它工作正常，但我有一些内容，我将通过ajax加载。当这些内容包含表单时，bootstrapvalidator将不起作用。我创建了一个示例来演示。

它基于bootstrapvalidator下载的formWithoutLabels.html示例。

我将formWithoutLabels2.html复制到formWithoutLabels2.html并用

替换表单的内容

<div id="result">
</div>

在javascript购物车中，我添加了ajax请求

$( "#result" ).load( "content.html" );

formWithoutLabels2.html：

<!DOCTYPE html>
<html>
<head>
<title>BootstrapValidator demo</title>

<link rel="stylesheet" href="../vendor/bootstrap/css/bootstrap.css"/>
<link rel="stylesheet" href="../dist/css/bootstrapValidator.css"/>

<script type="text/javascript" src="../vendor/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="../vendor/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../dist/js/bootstrapValidator.js"></script>
</head>
<body>
<div id="result">
</div>

<script type="text/javascript">
$( "#result" ).load( "content.html" );


$(document).ready(function() {
$('#defaultForm').bootstrapValidator({
    message: 'This value is not valid',
    feedbackIcons: {
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
    },
    fields: {
        username: {
            message: 'The username is not valid',
            validators: {
                notEmpty: {
                    message: 'The username is required and can\'t be empty'
                },
                stringLength: {
                    min: 6,
                    max: 30,
                    message: 'The username must be more than 6 and less than 30 characters long'
                },
                regexp: {
                    regexp: /^[a-zA-Z0-9_\.]+$/,
                    message: 'The username can only consist of alphabetical, number, dot and underscore'
                }
            }
        },
        email: {
            validators: {
                notEmpty: {
                    message: 'The email address is required and can\'t be empty'
                },
                emailAddress: {
                    message: 'The input is not a valid email address'
                }
            }
        },
        password: {
            validators: {
                notEmpty: {
                    message: 'The password is required and can\'t be empty'
                },
                identical: {
                    field: 'confirmPassword',
                    message: 'The password and its confirm are not the same'
                }
            }
        },
        confirmPassword: {
            validators: {
                notEmpty: {
                    message: 'The confirm password is required and can\'t be empty'
                },
                identical: {
                    field: 'password',
                    message: 'The password and its confirm are not the same'
                }
            }
        }
    }
});
});
</script>
</body>
</html>
</pre>

content.html：

<div class="container" style="margin-top: 50px;">
    <div class="row">
        <div class="col-lg-4 col-lg-offset-4">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">Sign up</h3>
                </div>

                <div class="panel-body">
                    <form id="defaultForm" method="post">
                        <div class="form-group">
                            <input type="text" class="form-control" name="username" placeholder="Username" />
                        </div>

                        <div class="form-group">
                            <input type="text" class="form-control" name="email" placeholder="Email" />
                        </div>

                        <div class="form-group">
                            <input type="password" class="form-control" name="password" placeholder="Password" />
                        </div>

                        <div class="form-group">
                            <input type="password" class="form-control" name="confirmPassword" placeholder="Retype password" />
                        </div>

                        <div class="form-group">
                            <button type="submit" class="btn btn-primary">Sign up</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

在此示例中，bootstrapvalidator不起作用。我需要做什么，它在ajax请求中工作？

有什么想法吗？

Answer 1

使用AJAX查询加载内容时，在DOM中显示内容之前需要等待一段时间。通过分配回调函数，您可以在内容完全加载时捕获事件：

$("#result").load("content.html", function() {
    // attach validation to the form here
    $("#defaultForm").bootstrapValidator({
         // ...
    });
});

这样，bootstrapValidator函数将在加载内容后分配，而不是之前。

请参阅此处的加载文档：http://api.jquery.com/load/

ajax加载内容中的bootstrapvalidator

1 个答案: