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=".3.7/js/bootstrap.min.js"></script>
<script src="~/Scripts/bootstrap-toolkit.js"></script>
@Scripts.Render(".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'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./bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="~/Scripts/bootstrap-toolkit.js"></script>
@Scripts.Render("http://ajax.aspnetcdn./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.
Share Improve this question edited Oct 18, 2017 at 5:07 Rob 2,3334 gold badges32 silver badges41 bronze badges asked Oct 17, 2017 at 23:40 JamesJames 531 gold badge1 silver badge7 bronze badges 2-
~is missing there. – Taha Paksu Commented Oct 18, 2017 at 5:12 - I got the same issue when i have updated my jquery version from 1.11.1 to 3.x.x. – Gireesh Commented Mar 5, 2019 at 5:39
1 Answer
Reset to default 8In 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.