The Data validation before posting to server is important essential part of web development. In front-end there are many options are available to validate user input like custom validation, validation with required attribute, or using library for validation.
There are many libraries or plugins are available to perform front end validation in jQuery. The jQuery Validate is most common and very easy to use plugin for jQuery. It has most common validation methods for regular cases like email validation, max/min input, required validation or more. With jQuery validate, you can also define custom methods or you can validate data remotely like user name validation in database.
In this tutorial, we will take example registration form and implement front-end validation using jQuery validate library. Before starting go to official website and download plugin or get CDNs.
Here, we will also use bootstrap for proper design of our form. First of all let's create 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 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 submitting before resolving all validation rules.
Open 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 jQuery ready method to define validation. The validate method take selector element and define validation rules for that element. Here we just have passed form ID.
While in validation part, we have defined rules for validation. Most common rule is Required which validates particular field is required to submit form. another rule like email for email syntax validation, number for numeric input and minlength for defining minimum input length. In this example, minlength rule check minimum length of password is 8 charcter or not. Another useful rule is equalTo which check password and confirm password are same or not and it's case sensitive.
When we miss some of those validation condition while submitting form. It will show message according to condition. You can customize error message as per your requirement. Consider below example for 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 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 which 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.
Share your thoughts
Ask anything about this examples
Please enter name
Please enter some comments