I am trying to use jquery validate and I am getting the following error:
Uncaught TypeError: form.validate is not a function
Here is the order that my scripts are being referenced when I load the site since the first thing to be assumed is that I might be loading jquery after jquery-validation (but I am not):
<head>
<script src="/lib/jquery/dist/jquery.js"></script>
<script src="/lib/kendo-ui/js/kendo.all.min.js"></script>
<script src="/lib/kendo-ui/js/kendo.aspnetmvc.min.js"></script>
</head>
<!-- BOTTOM OF PAGE -->
<script src="/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="/lib/jquery-steps/build/jquery.steps.js"></script>
<script src="/js/site.js?v=EWaMeWsJBYWmL2g_KkgXZQ5nPe-a3Ichp0LEgzXczKo"></script>
<script src="/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
The form is declared in the html like this:
<form id="example-form" action="/MyController/Wizard" method="post">
</form>
Additionally here is my JavaScript code:
var form = $("#example-form");
form.validate({
errorPlacement: function errorPlacement(error, element) { element.before(error); },
rules: {
confirm: {
equalTo: "#password"
}
}
});
form.children("div").steps({
headerTag: "h3",
bodyTag: "section",
transitionEffect: "slideLeft",
onStepChanging: function (event, currentIndex, newIndex) {
form.validate().settings.ignore = ":disabled,:hidden";
return form.valid();
},
onFinishing: function (event, currentIndex) {
form.validate().settings.ignore = ":disabled";
return form.valid();
},
onFinished: function (event, currentIndex) {
alert("Submitted!");
}
});
