Bootstrap 验证器抛出“BootstrapValidator 的 JavaScript 需要 jQuery”

Question

我正在构建一个简单的 Web 表单 Web 应用程序，我想使用 bootstrap validator plugin 进行验证。我不是 jQuery 的忠实粉丝，所以我使用数据注释。

我在 bundle.config 中包含了所需的 CSS 文件

<include path="~/Content/bootstrapValidator.min.css" />

我在 BundleConfig.cs 中注册了 jquery 和验证器脚本

bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-2.1.1.js"));
bundles.Add(new ScriptBundle("~/bundles/validator").Include("~/Scripts/bootstrapValidator.min.js"));

我在母版页中渲染了脚本：

<%: Scripts.Render("~/bundles/jquery") %>
<%: Scripts.Render("~/bundles/validator") %>

我在主窗体中注册了反馈图标，它们总是在那里：

<form runat="server" data-bv-feedbackicons-valid="glyphicon glyphicon-ok" data-bv-feedbackicons-invalid="glyphicon glyphicon-remove" data-bv-feedbackicons-validating="glyphicon glyphicon-refresh">

这是我要验证的表单。这是 VS2013 生成的登录表单，但我将其剥离以适应我的需要。

<div class="row">
    <div class="col-md-6">
        <table class="table table-condensed table-responsive">
            <tr>
                <td class="text-right text-middle col-md-5">
                    Username:
                </td>
                <td class="text-middle">
                    <asp:TextBox runat="server" ID="Username" CssClass="form-control" data-bv-notempty="true"/>
                </td>
            </tr>
            <tr>
                <td class="text-right text-middle col-md-5">
                    Password:
                </td>
                <td class="text-middle">
                    <asp:TextBox runat="server" ID="Password" TextMode="Password" CssClass="form-control" data-bv-notempty="true"/>
                </td>
            </tr>
        </table>
    </div>
</div>
<asp:Button runat="server" OnClick="LogIn" Text="Log in" CssClass="btn btn-primary col-md-4 col-md-offset-1"/>

当我单击按钮时，未完成验证，并且我收到用户字段为空的服务器验证错误。由于某种原因，客户端验证永远不会发生。

编辑： 我忘记了javascript代码：

<script>
    $(document).ready(function() {
        $('form').bootstrapValidator();
    });
</script>

附带的问题，如果我将此代码放在母版页中，这是否可行，还是必须将其放在我想要验证的所有页面上？

编辑：

我交换了包含并在上面进行了更改，但它仍然不起作用。现在，当调用 bootstrapValidator 函数时，会抛出此异常：

Uncaught TypeError: undefined is not a function 
(anonymous function) 
fire 
self.fireWith 
jQuery.extend.ready 
completed

而且仍然没有客户端验证...

Answer 1

让我指出，确保您包含 jQuery，但请确保您在需要它的函数之前包含它。在包含 jQuery 之前，您使用脚本包在页面上包含验证器。这将使它失败。尝试做：

<%: Scripts.Render("~/bundles/jquery") %>
<%: Scripts.Render("~/bundles/validator") %>

在包含库时，顺序始终很重要。始终首先包含 jQuery，然后是任何使用它的库。