Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 903
James Avatar asked Jan 30 '23 09:01

James


1 Answers

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.

like image 179
Derek Brown Avatar answered Feb 01 '23 00:02

Derek Brown