Form Validation using jQuery Validate helps make sure data is correct before sending it to the server. On the front end, you can check input with basic HTML attributes or use a library for stronger validation.
The jQuery Validate plugin is easy to use and supports common rules like required fields, email checks, and input length. You can also add custom rules or even check values directly from the database.
In this tutorial, we will take an example registration form and implement front-end validation using the jQuery validate library. Before starting go to the official website and download a plugin or get CDNs.
Here, we will also use Bootstrap for the proper design of our form. First of all let’s create a simple HTML page and include jQuery, jQuery validate, and Bootstrap in it.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Simple Registration Form</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style type="text/css">
.error{
color:#f00;
}
</style>
</head>
<body>
<div class="container">
<h2 class="text-center">Register Here</h2>
<form name="form" id="form" action="/register.php">
<div class="row">
<div class="col-md-8 offset-2">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" name="name" placeholder="Enter Name">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" name="email" placeholder="Enter Email">
</div>
<div class="form-group">
<label for="number">Phone No</label>
<input type="number" class="form-control" name="phone" placeholder="Enter Number">
</div>
<div class="form-group">
<label for="date">D.O.B.</label>
<input type="date" class="form-control" name="date" >
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" name="password" placeholder="Password">
</div>
<div class="form-group">
<label for="confirm_password">Confirm Password</label>
<input type="password" class="form-control" id="confirm_password" name="confirm_password" placeholder="Confirm Password">
</div>
<button type="submit" class="btn btn-primary float-right">Register</button>
</div>
</div>
</form>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/jquery.validate.js" crossorigin="anonymous"></script>
</body>
</html>Here, we have created a simple form with basic information like name, email, number, DOB, and password. Now we will add some validation to this form. It will stop user from submitting before resolving all validation rules.
Open the HTML file and add below code after CDN links.
<script type="text/javascript">
$(document).ready(function() {
$("#form").validate({
rules: {
name: 'required',
email: {
required: true,
email: true,
maxlength: 255,
},
phone: {
required: true,
number: true,
},
date:{
required: true,
date: true,
},
password:{
required: true,
minlength: 8,
},
confirm_password:{
required: true,
minlength: 8,
equalTo: "#password",
},
},
error: function(label) {
$(this).addClass("error");
},
});
});
</script>Here, we used the jQuery’s ready method to define validation. The validate method takes selector elements and defines validation rules for that element. Here we just have passed form ID.
While in the validation part, we have defined validation rules. The most common rule is Required which validates a particular field required to submit a form. Other rules like email for email syntax validation, a number for numeric input, and minlength for defining minimum input length. In this example, the minlength rule checks minimum length of a password is 8 characters or not. Another useful rule is equalTo which checks passwords and confirms whether a password is the same or not and it’s case sensitive.
When we miss some of those validation conditions while submitting the form. It will show messages according to condition. You can customize the error message as per your requirements. Consider the below example for a custom error message.
$("#form").validate({
rules: {
name: 'required',
email: {
required: true,
email: true,
maxlength: 255,
},
phone: {
required: true,
number: true,
},
},
messages: {
name: {
required: "Name is required",
email: {
required: "Email is required",
email: "Please enter valid email",
},
phone: {
required: "Please enter phone number",
number: "Only numeric values are allowed",
},
},
error: function(label) {
$(this).addClass("error");
},
});The message object will define the error message as per the field and rule. Whenever the validation fails it will show these messages as per fields.
Conclusion
In this article, we have created a simple registration form and validated it using the jQuery validation plugin and also used some common rules that are useful in regular practice. There are many validation rules which can be used as per their requirement. jQuery validation also provides a way to add custom rules. You will learn about them in further articles.
For enhancing form validation in your web projects, you can explore Most Useful JavaScript Validation Library. It highlights popular JavaScript libraries that make validating user input easier and more reliable, complementing your work with jQuery Validate.
