Guide · Open source
How to use jquery-validation: setup, rules and accessible errors
Updated · written with AI from the project's own documentation and checked against our catalogue data
The jQuery Validation Plugin checks that form fields are filled in and formatted correctly before a form is submitted, and shows error messages next to the fields. It is built for forms that already exist on a page, so you add it with a single method call. This guide shows how to include it, turn validation on, customize rules and messages, and place errors for better screen reader support.
jQuery Validationjquery-validation/jquery-validation · ★ 10.3k · MIT Install options & downloads Quick start
- 1Get the files. Download the prebuilt files from https://jqueryvalidation.org/ or clone the repository with git.
- 2Include jQuery. Load jQuery on the page before the plugin file.
- 3Include the plugin. Add the jquery.validate file after jQuery in your page or load it through RequireJS.
- 4Select your form. Use a selector such as $("form") to pick the form to validate.
- 5Call validate(). Call the validate method on the selected form to turn validation on.
- 6Add rules and messages. Pass a rules or messages object to validate() to match your application.
- 7Set errorElement. Use errorElement to place errors in a chosen element for better screen reader support.
What you need before you start
The plugin depends on jQuery, so your page must already use it or load it. It is a code library, not a finished tool, so you need to be comfortable adding JavaScript to a page.
The plugin is a download-based install. Prebuilt files can be downloaded from the project's homepage. The source repository can be cloned with the command below if you want the latest unreleased changes.
- Requires jQuery on the page
- Prebuilt files are available from https://jqueryvalidation.org/
- Licensed under the MIT license
git clone https://github.com/jquery-validation/jquery-validation.gitInclude jQuery and the plugin on your page
Load jQuery first, then the plugin file, and then your script that calls validate(). Select the form you want to validate and call the validate method on it.
If your project uses RequireJS, you can load jQuery and the plugin as modules and call validate() inside the module function.
<form>
<input required>
</form>
<script src="jquery.js"></script>
<script src="jquery.validate.js"></script>
<script>
$("form").validate();
</script>Add custom rules and messages
Pass options to validate() to set rules for each field and to customize messages. The project documentation explains the full set of rule and message options.
You can also add your own validation logic with a custom method when the built-in checks do not fit your application.
- Use the rules option to set requirements for each field
- Use the documentation at https://jqueryvalidation.org/documentation/ for full setup of rules and customizations
- Use a custom method when you need validation beyond the built-in checks
Trim whitespace with the normalizer
As of version 1.14.0 the plugin stops trimming white spaces from the value of the attached element. If you want the previous behaviour, use the normalizer option, which transforms a value before validation. Inside the normalizer, this refers to the DOM element being validated.
The normalizer option has been available since v1.15.0.
$("#myForm").validate({
rules: {
username: {
required: true,
normalizer: function(value) {
return $.trim(value);
}
}
}
});Place error messages for better screen reader support
By default, an error message is output in a label element, which creates two label elements pointing to one input. The README notes this is valid HTML but has inconsistent support across screen readers.
Set the errorElement option to output errors in an element of your choice. The plugin then adds aria-describedby to the input and ties it to the error element.
- Set errorElement, for example to "span"
- The plugin adds aria-describedby to the input automatically
$("#myform").validate({
errorElement: "span"
});Understand the email validation check
As of version 1.12.0 the plugin uses the same regular expression that the HTML5 specification suggests for browsers. The project follows that specification's check.
If you have stricter email requirements, the project suggests using a custom method. To adjust the built-in regular expression patterns, follow the documentation for the validator methods.
What people use it for
- Adding drop-in validation to an existing signup or contact form without rebuilding it
- Adding custom rules for fields that need application-specific checks
- Placing error messages in a span so screen readers can announce them through aria-describedby
- Trimming whitespace from input values with a normalizer before they are validated
Frequently asked questions
Is jQuery Validation free to use?
The project is licensed under the MIT license, and the README states this. Check the license file in the repository for the full terms before using it in your project.
Does jQuery Validation require jQuery?
Yes. The plugin depends on jQuery, so projects that do not use jQuery are not a good fit. The plugin is added to forms that already exist on the page.
How do I install jquery-validation?
Download the prebuilt files from https://jqueryvalidation.org/ or clone the repository with git clone https://github.com/jquery-validation/jquery-validation.git. Then include jQuery and the plugin on your page and call validate() on your form.
How do I add custom validation rules?
Pass rules to the validate() method for each field. For logic the built-in checks do not cover, use a custom method, which the project documentation describes.
Why does my email validation accept some addresses I expected to reject?
Since version 1.12.0 the plugin follows the regular expression suggested by the HTML5 specification. If you need stricter checks, the README recommends using a custom method.
What are good alternatives to jQuery Validation?
Comparable projects mentioned in the analysis include Parsley.js, Validate.js, Just-Validate and Bootstrap Validator. Pick one based on whether your project already uses jQuery and how much custom behaviour you need.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use jQuery Validation if your site already runs on jQuery and you want to add validation to existing forms with a few lines of code. Skip it if your project does not use jQuery, if you want a finished no-code tool, or if you need email checks stricter than the HTML5 pattern, where a custom method is the recommended route.
Install options & downloads