Solve - $(...).validate is not a function jQuery Error

avatar

Borislav Hadzhiev

Tue Oct 19 20212 min read

banner

Photo by Zachary Tan

Solve - $(...).validate is not a function #

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.

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee