Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to validate a form using jQuery?
To validate a form using jQuery, we can use the jQuery Validation Plugin. This plugin provides a simple way to define validation rules, custom error messages, and submit handlers for HTML forms without writing complex validation logic from scratch.
The plugin works by attaching the .validate() method to a form element and defining rules for each input field by its name attribute.
Syntax
The basic syntax for jQuery form validation is −
$(document).ready(function() {
$("#formId").validate({
rules: {
fieldName: {
required: true,
minlength: 2
}
},
messages: {
fieldName: {
required: "This field is required",
minlength: "Minimum 2 characters required"
}
},
submitHandler: function(form) {
form.submit();
}
});
});
Where −
-
rules − Defines validation rules for each field using its
nameattribute. - messages − Custom error messages for each rule. If omitted, default messages are shown.
- submitHandler − A callback function that runs when the form passes all validations.
Common Validation Rules
| Rule | Description |
|---|---|
required |
Field must not be empty |
email |
Must be a valid email address |
minlength |
Minimum number of characters |
maxlength |
Maximum number of characters |
min / max |
Minimum / maximum numeric value |
equalTo |
Must match another field (e.g., confirm password) |
Example: Basic Form Validation
In this example, we validate a simple form with first name, last name, and email fields using the jQuery Validation Plugin −
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.21.0/jquery.validate.min.js"></script>
<style>
.error { color: red; font-size: 14px; }
input { display: block; margin-bottom: 10px; padding: 5px; }
</style>
</head>
<body>
<h2>Validation of a Form</h2>
<form id="myForm">
First name:
<input type="text" name="firstname">
Last name:
<input type="text" name="lastname">
Email:
<input type="text" name="u_email">
<input type="submit" value="Submit">
</form>
<script>
$(document).ready(function() {
$("#myForm").validate({
rules: {
firstname: "required",
lastname: "required",
u_email: {
required: true,
email: true,
maxlength: 255
}
},
messages: {
firstname: "Please enter your first name",
lastname: "Please enter your last name",
u_email: {
required: "Please enter your email",
email: "Please enter a valid email address"
}
},
submitHandler: function(form) {
alert("Form submitted successfully!");
}
});
});
</script>
</body>
</html>
When the form is submitted with empty fields, error messages appear below each field. Once all fields pass validation, the submit handler is triggered.
Example: Registration Form with Password Matching
In this example, we validate a registration form that includes password confirmation using the equalTo rule −
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.21.0/jquery.validate.min.js"></script>
<style>
.error { color: red; font-size: 14px; }
input { display: block; margin-bottom: 10px; padding: 5px; width: 250px; }
label { font-weight: bold; }
</style>
</head>
<body>
<h2>Registration Form</h2>
<form id="regForm">
<label>Username:</label>
<input type="text" name="username">
<label>Email:</label>
<input type="text" name="email">
<label>Password:</label>
<input type="password" name="password" id="password">
<label>Confirm Password:</label>
<input type="password" name="confirm_password">
<input type="submit" value="Register">
</form>
<script>
$(document).ready(function() {
$("#regForm").validate({
rules: {
username: {
required: true,
minlength: 3
},
email: {
required: true,
email: true
},
password: {
required: true,
minlength: 6
},
confirm_password: {
required: true,
equalTo: "#password"
}
},
messages: {
username: {
required: "Please enter a username",
minlength: "Username must be at least 3 characters"
},
email: {
required: "Please enter your email",
email: "Please enter a valid email"
},
password: {
required: "Please enter a password",
minlength: "Password must be at least 6 characters"
},
confirm_password: {
required: "Please confirm your password",
equalTo: "Passwords do not match"
}
},
submitHandler: function(form) {
alert("Registration successful!");
}
});
});
</script>
</body>
</html>
This form validates that the username is at least 3 characters, email is valid, password is at least 6 characters, and the confirm password field matches the password.
Conclusion
The jQuery Validation Plugin makes form validation simple by letting you define rules and custom messages using the .validate() method. It supports built-in rules like required, email, minlength, and equalTo for common validation needs. For complex forms, you can combine multiple rules per field and use the submitHandler to control form submission after successful validation.
32K+ Views
