jqBootstrapValidation is not a function

Question

I have a standard .NET 4.5 Webforms application. However as soon as I include the jqBootstrapValidation from http://reactiveraven.github.io/jqBootstrapValidation/ I get the error:

jqBootstrapValidation is not a function

in the Firebug console. How do I track this down? I include the relevant sections of my site master:

<head runat="server">
    <meta charset="utf-8" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"> </script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"> </script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet">
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"> </script>
    <script src="//raw.github.com/ReactiveRaven/jqBootstrapValidation/1.3.6/jqBootstrapValidation.js"></script>
</head>
<body data-spy="scroll" data-target="#NavbarLeft">
    <form novalidate class="form-horizontal" runat="server">
        <asp:ScriptManager runat="server" EnablePageMethods="True" EnableCdn="True">
            <Scripts>
                <%--Framework Scripts--%>
                <asp:ScriptReference Name="MsAjaxBundle" />
                <asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
                <asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
                <asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
                <asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
                <asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
                <asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
                <asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
                <asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
                <asp:ScriptReference Name="WebFormsBundle" />
                <%--Site Scripts--%>
            </Scripts>
        </asp:ScriptManager>

and then before the closing body tag:

    </form>

    <%--//Comment this in once we can work out why it wont compile--%>
    <script>
        $(function () {
            $("input,select,textarea").not("[type=submit]").jqBootstrapValidation();
        });
    </script>
</body>
</html>

Below is the relevant code from App_Start registering the bundles....

public class BundleConfig
{
    public static void RegisterBundles(BundleCollection aBundles)
    {
        aBundles.Add(new ScriptBundle("~/Bundles/WebFormsJs").Include(
            "~/Scripts/WebForms/WebForms.js",
            "~/Scripts/WebForms/WebUIValidation.js",
            "~/Scripts/WebForms/MenuStandards.js",
            "~/Scripts/WebForms/Focus.js",
            "~/Scripts/WebForms/GridView.js",
            "~/Scripts/WebForms/DetailsView.js",
            "~/Scripts/WebForms/TreeView.js",
            "~/Scripts/WebForms/WebParts.js"));

        aBundles.Add(new ScriptBundle("~/Bundles/MsAjaxJs").Include(
            "~/Scripts/WebForms/MsAjax/MicrosoftAjax.js",
            "~/Scripts/WebForms/MsAjax/MicrosoftAjaxApplicationServices.js",
            "~/Scripts/WebForms/MsAjax/MicrosoftAjaxTimer.js",
            "~/Scripts/WebForms/MsAjax/MicrosoftAjaxWebForms.js"));

        // Use the Development version of Modernizr to develop with and learn from. Then, when you’re
        // ready for production, use the build tool at http://modernizr.com to pick only the tests you need
        aBundles.Add(new ScriptBundle("~/Bundles/modernizr").Include(
            "~/Scripts/modernizr-*"));
    }
}

What am I missing here and how do I fix it? Diagnose these kinds of "not a function" issues.

It seems the error disappears if I don't have any fields protected by http://amanek.com/building-data-annotations-validator-control-with-client-side-validation/

But I still don't see how this would be affecting things as that is using pure JS under the skin.

Can you check if you will have issues when instead of DataAnnotationsValidator you will put a standard ASP.NET validators? — Alexander Manekovskiy, Nov 21 '13 at 03:52
@AlexanderManekovskiy It appears that unobtrusive validation was the culprit. See my answer below. — TheEdge, Nov 26 '13 at 00:01

score 1 · Accepted Answer · answered Nov 21 '13 at 10:46

1

I worked out that Unobtrusive validation was adding in jQuery twice and at a different point in the page under some circumstances.

As I am not using unobtrusive validation I disabled it with:

<appSettings xdt:Transform="Replace">
    <add key="ValidationSettings:UnobtrusiveValidationMode" value="None"/>
</appSettings>

answered Nov 21 '13 at 10:46

TheEdge

9,291
15
67
135

ScriptManager adds jquery when unobtrusive validation is enabled. See this question for a workaround - http://stackoverflow.com/q/12065228/1314859. – Alexander Manekovskiy Dec 30 '13 at 03:13

score 0 · Answer 2 · answered Nov 20 '13 at 05:14

0

Your script includes look strange to me. For example, I think:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"> </script>

should actually be:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"> </script>

Change all of your includes to the latter format and see if that helps.

answered Nov 20 '13 at 05:14

Benjewman

498
4
14

1

Makes no difference. The protocol agnostic form ie // is so that when the site is accessed as HTTP those resources are retrieved as HTTP and when as HTTPS then retrieved as HTTPS. As you can see Google also provides them in that form: https://developers.google.com/speed/libraries/devguide#jquery – TheEdge Nov 20 '13 at 05:25
1

I stand corrected and thanks for the info. I had never seen that sort of notation before so I just figured it was a copy-paste error or something. – Benjewman Nov 20 '13 at 06:12

jqBootstrapValidation is not a function

2 Answers2

Linked