CODEWITHSUNDEEP
javascriptjqueryjquery-validate
jaksa
jaksa

Reputation: 883

Jquery validation plugin - TypeError: $(...).validate is not a function

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>

Upvotes: 63

Views: 312828

Answers (10)

n1k1ch
n1k1ch

Reputation: 2692

Include jquery.validate.js before additional-methods.js.

$.validate() method is defined there

Upvotes: 5

Ηρακλής Β.
Ηρακλής Β.

Reputation: 84

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.

Upvotes: 1

AS Kayal
AS Kayal

Reputation: 9

"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.

Upvotes: 1

justdan23
justdan23

Reputation: 597

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 );
}

Upvotes: 0

Ali
Ali

Reputation: 1795

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

Upvotes: 2

Little Brain
Little Brain

Reputation: 2847

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');

Upvotes: 2

dragoweb
dragoweb

Reputation: 731

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

Upvotes: 12

Carl
Carl

Reputation: 1816

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)

Upvotes: 3

Damien Black
Damien Black

Reputation: 5647

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)

Upvotes: 2

Barmar
Barmar

Reputation: 781096

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:

Upvotes: 121

Related Questions