Jquery validation plugin - TypeError: $(...).validate is not a function
JavascriptJqueryJquery ValidateJavascript Problem Overview
My script throw errors:
> TypeError: jQuery.validator is undefined additional-methods.js:20 TypeError: $(...).validate is not a function index.php:115
Probably, I have mistake in jQuery code.
<head>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
<script src="http://jquery.bassistance.de/validate/additional-methods.js"></script>
</head>
<body>
<form id="registerForm" method="post" action="logrej.php">
<input name="login" type="text"/>
<input name="nick" type="text"/>
<input type="password" id="passw" name="password"/>
<input type="password" name="retype" />
<input type="submit" value="Zarejestruj!" />
</form>
<script>
$("#registerForm").validate({
rules: {
login: {
required:true,
rangelenght: [4,20],
remote:"look.php"
},
nick : {
required:true,
rangelenght:[4,20],
remote:"look.php"
},
password: {
required:true,
rangelenght:[4.20]
},
retype: {
required:true,
equalTo:"#passw"
}
},
messages:{
login:{
required:"To pole jest wymagane!"
}
}
})
</script>
Javascript Solutions
Solution 1 - Javascript
You're not loading the validation plugin. You need:
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
Put this before the line that loads the additional methods.
Also, you should get the additional methods from the CDN as well, rather than jquery.bassistance.de.
Other errors:
[4.20]
should be
[4,20]
and
rangelenght:
should be:
rangelength:
Solution 2 - Javascript
For me problem solved by changing http://ajax... into https://ajax... (add an S to http)
https://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js
Solution 3 - Javascript
Include jquery.validate.js before additional-methods.js.
$.validate() method is defined there
Solution 4 - Javascript
It looks like the JavaScript error your getting is probably being caused by
password: {
required:true,
rangelenght:[4.20]
},
As the [4.20] should be [4,20], which i'd guess is throwing off the validation code in additional-methods hence giving the type error's you posted.
Edit: As others have noted in the below comments rangelenght is also misspelled & jquery.validate.js library appears to be missing (assuming its not compiled in to one of your other assets)
Solution 5 - Javascript
I had the same problem. I am using jquery-validation as an npm module and the fix for me was to require the module at the start of my js file:
require('jquery-validation');
Solution 6 - Javascript
for me, the problem was from require('jquery-validation') i added in the begging of that js file which Validate method used which is necessary as an npm module
unfortunately, when web pack compiles the js files, they aren't in order, so that the validate method is before defining it! and the error comes
so better to use another js file for compiling this library or use local validate method file or even using CDN but in all cases make sure you attached jquery before
Solution 7 - Javascript
You didn't include the base jQuery Validation library:
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script>
Put that before the additional methods library. (BTW this is a hosted version, download your own if you want)
Solution 8 - Javascript
"validator.min.js" You need to import this JS file after "jquery-3.4.1.min.js". For you version might change but this way has worked for me.
Step 1 : Your project link files or it might be CDN Step 2 :
Put validator.min.js CDN link or project JS folder link.
That is all, hope it might helps you.
Solution 9 - Javascript
If using VueJS, import all the js dependencies for jQuery extensions first, then import $ second...
import "../assets/js/jquery-2.2.3.min.js"
import "../assets/js/jquery-ui-1.12.1.min.js"
import "../assets/js/jquery.validate.min.js"
import $ from "jquery";
You then need to use jquery from a javascript function called from a custom wrapper defined globally in the VueJS prototype method.
This safeguards use of jQuery and jQuery UI from fighting with VueJS.
Vue.prototype.$fValidateTag = function( sTag, rRules )
{
return ValidateTag( sTag, rRules );
};
function ValidateTag( sTag, rRules )
{
Var rTagT = $( sTag );
return rParentTag.validate( sTag, rRules );
}
Solution 10 - Javascript
I had the same error and it was for a totally different reason.
I had been loading the libraries in the correct order but the problem was that I was wrapping jQuery("#contact_form").validate(); inside jQuery(document).ready(function () {});.
When I placed it outside the error disappeared.