TypeError: $(...).validate is not a function in jQuery

avatar

Borislav Hadzhiev

Last updated: Oct 19, 2021

banner

Photo from Unsplash

TypeError: $(...).validate is not a function in jQuery #

The "$(...).validate is not a function" jQuery error occurs when the jQuery validation plugin is not loaded or the jQuery-related scripts are loaded in an incorrect order. The validation plugin should be loaded after the jQuery library.

Here's the HTML for a working example.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <!-- 👇️ Example form from docs --> <form id="commentForm" method="get" action=""> <fieldset> <p> <label for="cname">Name (required, at least 2 characters)</label> <input id="cname" name="name" minlength="2" type="text" required /> </p> <p> <label for="cemail">E-Mail (required)</label> <input id="cemail" type="email" name="email" required /> </p> <p> <label for="ccomment">Your comment (required)</label> <textarea id="ccomment" name="comment" required></textarea> </p> <p> <input class="submit" type="submit" value="Submit" /> </p> </fieldset> </form> <!-- ✅ FIRST - load jquery ✅ --> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous" ></script> <!-- ✅ SECOND - load jquery validate ✅ --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js" integrity="sha512-37T7leoNS06R80c8Ulq7cdCDU5MNQBwlYoy1TX/WUsLFC2eYNqtKlV0QjH7r8JpG/S0GUMZwebnVFLPd6SU5yg==" crossorigin="anonymous" referrerpolicy="no-referrer" ></script> <!-- ✅ THIRD - load additional methods ✅ --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/additional-methods.min.js" integrity="sha512-XZEy8UQ9rngkxQVugAdOuBRDmJ5N4vCuNXCh8KlniZgDKTvf7zl75QBtaVG1lEhMFe2a2DuA22nZYY+qsI2/xA==" crossorigin="anonymous" referrerpolicy="no-referrer" ></script> <!-- ✅ FOURTH - load your JS script ✅ --> <script src="index.js"></script> </body> </html>
Notice that we loaded the jQuery validation plugin after we loaded the jQuery library and before we loaded additional methods.

The index.js file is loaded after all of the other scripts.

Here's the code in the index.js file:

index.js
$('#commentForm').validate();

If you refresh the page and try to submit the form you will see the validation kicking in.

The order the JS scripts are added in is very important, make sure to load the jQuery validation plugin after you have loaded the jQuery library.

Another common reason the error occurs is when the path to the jQuery scripts is incorrect.

If you decide to download the jQuery code to your local file system and include it directly instead of using a CDN, make sure to specify the correct path to the file.

Also, make sure you're not including the jQuery library or plugins twice on the same page. Loading the same library twice might cause this error.

Conclusion #

The "$(...).validate is not a function" jQuery error occurs when the jQuery validation plugin is not loaded or the jQuery-related scripts are loaded in an incorrect order. The validation plugin should be loaded after the jQuery library.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.