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.
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.Obviously you don't have a form element, so this is something you will need to add.
Use
$(this).parsley().isValid()
if you using parsley plugin