Updated March 27, 2023
Introduction to jQuery form validation
In this jQuery form validation, we will create the basic form and the validation will be done for the form. Before we submit the data to the database it is important to validate the form. In this, we will use the HTML file with validation to validate the client-side validation before we are submitting it to the server.
Syntax:
We are using the required in this program.
required (dependency-expression)- It is of string type. It returns the Boolean value. It does not accept any arguments. It will return false if the field is empty. It will display the message depending on the field.
- White spaces are also considered as valid.
- This works with the text inputs, selects, checkboxes and radio buttons.
How does jQuery form Validation work?
The important thing we have to look while we are writing the program is including the jQuery library and validation plugin. We should write them in the head section of the HTML file otherwise it won’t work. The working is explained with an example.
Example:
This is a small example of the form validation. In this form we have the first name, last name, password, confirm password, E-mail, URL, and Message. In this program, I have copied the code of jQuery’s latest version in the file and named it as jquery.min.js and used it in the script src.
- We can see in the code in the function we have validated the first name and last name by using required, password and confirm password are also using required and it should be of a minimum length of 5 characters, E-mail, URL and Message are also using required and for the message it should display the message as Please enter a message.
- In the Style we have provided the font-size, display, height, width, clear, padding, color, margin-left, right, top, text-align and other details for the form to look better.
- Next, we have provided the input field as text, password and submit.
Code
<html>
<head>
<title>Form Validation</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.validation/1.15.1/jquery.validate.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#formdetails").validate({
rules: {
fname: "required",
lname: "required",
email: {
required: true,
email: true
},
pwd: {
required: true,
minlength: 5
},
cpwd: {
required: true,
minlength: 5
},
url: {
url: true
},
comment: {
required: true
}
},
messages: {
comment: "Please enter a message."
}
});
});
</script>
<style type="text/css">
{ font-family: Calibri;
font-size: 12px;
line-height: 16px;
}
.submit {
margin-left: 125px;
margin-top: 10px;
}
.label {
display: block;
float: left;
width: 150px;
text-align: right;
margin-right: 5px;
}
.Details-info {
padding: 12px 0;
clear: both;
width: 800px;
}
label.error
{
width: 250px;
display: block;
float: left;
color: red;
padding-left: 10px;
}
input[type=text], textarea { width: 300px; float: left; }
textarea {
height: 100px;
}
input[type=password], textarea { width: 300px; float: left; }
</style>
</head>
<body>
<left><h1>Form Validation</h1></left>
<form id="formdetails" method="post" action="">
<div class="Details-info"><span class="label">First Name *</span><input type="text" name="fname" /></div>
<div class="Details-info"><span class="label">Last Name *</span><input type="text" name="lname" /></div>
<div class="Details-info"><span class="label">Password *</span><input type="password" name="pwd" /></div>
<div class="Details-info"><span class="label">Confirm Password *</span><input type="password" name="cpwd" /></div>
<div class="Details-info"><span class="label">E-Mail *</span><input type="text" name="email" /></div>
<div class="Details-info"><span class="label">URL</span><input type="text" name="url" /></div>
<div class="Details-info"><span class="label">Message *</span><textarea name="comment" ></textarea></div>
<div class="Details-info"><input class="submit" type="submit" value="Submit"></div>
</form>
</body>
</html>Output:
- After running the code we can see the output as shown below.
- Before entering the data if we click on the submit button we will the output as shown below.
- As we can see that as we didn’t enter any data we can observe that the messages are displayed showing This field is required and please enter a message.
- After entering the first name and last name we can see the output as shown below.
- As we enter the data for the first name and last name we can see that the message is not displayed.
- For the password, it requires a minimum of length 5 as we mention in the code. If we enter less than 5 characters it will display the message Please enter at least 5 characters.
- As we can see in the above image that we have entered only 4 characters for the password so it is displaying the message Please enter at least 5 characters.
- It is the same for the confirm password as well as we can observe it in the below image.
- As we can see in the below image as we have given the 5 characters for the password the messages are not getting displayed.
- For the Email, if we are not providing the proper Email id it will display the message Please enter a valid email address as shown below.
- After entering the proper Email id the message is not displayed as shown in the below image.
- For URL same as the Email id if we are not providing the proper URL it will display the message Please enter a valid URL as we can see in the below image.
- If we enter a proper URL it won’t display the message as we can see it in the below image.
- For the message, if we won’t enter any message it will display the message Please enter a message as we can see it in the above image.
- As we enter the message we can see that the message won’t be displayed as shown in the below image.
- So once we will click on the submit button it will go to the server from the client. Once it is submitted to the server it will return to normal form as we can see it in the below image.
Conclusion
This is an example of the form of validation by using the jQuery. So by using the jQuery validation plugin, there is no need to write the code from the basic level. By using some rules the fields in the form will be validated by this plugin. By using this it will help us to work faster and in an easy way.
Recommended Articles
This is a guide to jQuery Form Validation. Here we discuss how does jQuery Form Validation work along with the respective examples. You may also have a look at the following articles to learn more –
