2

我将使用 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>

内容.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 请求中工作？

有任何想法吗？

4

1 回答 1

0

当您使用 AJAX 查询加载内容时，您需要等待一段时间，然后该内容才会出现在 DOM 中。您可以通过分配回调函数在内容完全加载时捕获事件：

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

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

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

于 2014-07-31T14:50:11.717 回答