jQuery validate: Uncaught TypeError: $(...)."valid is not a function" with valid references/order

Question

I'm getting the error message "Uncaught TypeError: $(...).valid is not a function" when attempting to call...

javascript

$('input[data-val=true]').on('blur', function() {
    $(this).valid();
});

HTML

<div class="col-xs-12 col-sm-5" style="margin-left:4px">
            <input required="True" class="form-control" data-bind="value: battleModel.ReserveTroopCount" data-val="true" data-val-number="The field Troop reserve must be a number." data-val-range="Troop reserve must be between 0 and 1000." data-val-range-max="1000" data-val-range-min="0" data-val-required="Troop reserve is required." id="ReserveTroopCount" name="ReserveTroopCount" placeholder="Troop reserve..." tabindex="1" title="Enter the minimum troops you want to reserve after the battle" type="text" value="5">

            <span class="field-validation-valid" data-valmsg-for="ReserveTroopCount" data-valmsg-replace="true"></span>
        </div>

References

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/Content/bootstrap.css" rel="stylesheet" />
<script src="@(Url.Content("/Scripts/jquery-2.2.4.js"))" type="text/javascript"></script>
<script src="@(Url.Content("/Scripts/jquery.validate.js"))" type="text/javascript"></script>
<script src="@(Url.Content("/Scripts/jquery.validate.unobtrusive.js"))" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="~/Scripts/bootstrap-toolkit.js"></script>
@Scripts.Render("http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.4.2.js")
<script src="../../Scripts/knockout.mapping-latest.js" type="text/javascript"></script>
<script src="@(Url.Content("~/Scripts/RRCommon.js"))" type="text/javascript"></script>
<script src="@(Url.Content("~/Scripts/StrUtil.js"))" type="text/javascript"></script>
<script src="@(Url.Content("~/Scripts/RRRoll.js"))" type="text/javascript"></script>

My jquery files are local, but they are valid. Just pulled them off of NuGet today. I see all of my scripts loaded in the browser...

Screenshot of browser dev tools displaying my script sources

What am I missing? Everything I've seen online suggests either the script reference is missing or they're in the wrong order. Not sure what else to do. The error suggests the referenced jquery files aren't getting loaded. I also tried online cdn references to the jquery files but got the same error.

I got the same issue when i have updated my jquery version from 1.11.1 to 3.x.x. — Gireesh
– Gireesh, Commented Mar 5, 2019 at 5:39

Derek Brown · Accepted Answer · 2017-10-18 00:24:11Z

8

In order to use the jQuery form validation plugin, you need to set it up on your form first. The documentation gives a few examples of this, but basically you need to select the form and run the .validate() function.

var form = $( "#myform" );
form.validate();

Obviously you don't have a form element, so this is something you will need to add.

answered Oct 18, 2017 at 0:24

Derek Brown

4,4575 gold badges30 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

James Over a year ago

Thanks, @Derek. This got me over the hump. Once I introduced the form element I ran into some other issues (e.g., validators weren't firing, form was still valid when fields were invalid). For others who may run into this issue, I found the solutions at the following questions helpful... stackoverflow.com/questions/15046117/… and stackoverflow.com/questions/20672406/…

Collectives™ on Stack Overflow

jQuery validate: Uncaught TypeError: $(...)."valid is not a function" with valid references/order

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related