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，然后是任何使用它的库。

Bootstrap验证器抛出＆＃39; BootstrapValidator的JavaScript需要jQuery＆＃39;

1 个答案: