Data validation before posting to a server is an important essential part of web development. In the front-end, there are many options available to validate user input like custom validation, validation with a required attribute, or using a library for validation.
There are many libraries or plugins available to perform front-end validation in jQuery. The jQuery Validate is the most common and very easy-to-use plugin for jQuery. It has the most common validation methods for regular cases like email validation, max/min input, required validation, and more. With jQuery validate, you can also define custom methods or you can validate data remotely like user name validation in 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.
