Validate Textbox In jQuery Examples/Demo
Ever wondered how to validate textbox in jQuery? If yes, here is an article that will serve as a very simple guide. In this article, I am going to share very easy way to validate a single textbox or multiple textboxes when a form is submitted. Additionally, you will be able to add colors to the textbox indicating error message and remove that color if the textbox validates successfully. The examples are very easy to follow and a demo is provided so that you can check them out in real time.
How To Validate Textbox In jQuery
Let’s assume that we have a form that contains two input textboxes with ID “first_name” and “last_name”. To make this really easy to understand, I am going to keep this example very short and very simple. We will see two variations of this. They are the following:
1. When the form is submitted, both the textboxes will be checked to see if they are empty. If yes, an alert will be shown that will show the error message. You can then enter the info & then submit the form. Then the checks will be made again. If both the fields are filled, then the form is submitted. So note that the fields will be checked to see if they are both blank or not. Ideally, you may want to add more validation but for the sake of this article, let’s keep it this simple.
2. This second set of variation covers all what we are doing in the variation above. Added to that, we are going to add a red background color to the textbox that is empty, just to show that there is an error in that field. Also we will focus the field that has an error so that the user can type automatically without having to manually click in it.
So let’s get started, shall we?
Here is the common HTML for all the following examples:
<html>
<head>
<title>Example to Validate a Textbox using jQuery</title>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<style type="text/css">
.error {
background-color: #FFD9D9;
border: 1px solid #F00;
}
</style>
</head>
<body>
<form method="post" class="my_form_class" id="my_form" action="<?php echo $_SERVER['PHP_SELF']; ?>" >
<label for="first_name">First Name</label>
<input type="text" name="first_name" id="first_name">
<br>
<label for="last_name">Last Name</label>
<input type="text" name="last_name" id="last_name">
<br>
<input type="submit" name="sbt_validate_textbox" id="sbt_validate_textbox" value="Validate Textboxes and Submit Form">
</form>
</body>
</html>Example 1: Most simplest way for textbox validation using jQuery
<script type="text/javascript">
$(document).ready(function(){
//When form is submitted, check to see if any of the input textboxes is empty. If yes, show an alert for each of them.
$('#my_form').on("submit", function(e){
//Collect value of first_name in a dedicated variable for our checks
var val_first_name = $("#first_name").val();
//Collect value of last_name in a dedicated variable for our checks
var val_last_name = $("#last_name").val();
//Check if first_name is empty.
if( $.trim(val_first_name) === '' )
{
//If the first_name value is really found empty, then show the alert
alert('First Name is Empty!');
//Prevent default form submission. If not used, form will be submitted without validation
e.preventDefault();
}
//Check if last_name is empty.
if( $.trim(val_last_name) === '' )
{
//If the last_name value is really found empty, then show the alert
alert('Last Name is Empty!');
//Prevent default form submission. If not used, form will be submitted without validation
e.preventDefault();
}
});
});
</script>As you can see from the above code, it is heavily commented. Make sure you read them to understand how each step works.
Example 2: Most simplest way for textbox validation using jQuery with error highlighting
<script type="text/javascript">
$(document).ready(function(){
$('#my_form').on("submit", function(e){
var val_first_name = $("#first_name").val();
var val_last_name = $("#last_name").val();
//If any error class already exists, remove it before processing the checks. This is done to make sure that if the input textboxes does not have any error, it will not be highlighted any more.
$("#first_name").removeClass('error');
$("#last_name").removeClass('error');
if( $.trim(val_first_name) === '' )
{
//If error is found, alert it first
alert('First Name is Empty!');
//When this field is found to have an error in it, add "error" class to it so that it is highlighted in red color for visibilty sakes
$("#first_name").addClass('error');
//Automatically focus this field because it has an error in it.
$("#first_name").focus();
e.preventDefault();
}
if( $.trim(val_last_name) === '' )
{
//If error is found, alert it first
alert('Last Name is Empty!');
//When this field is found to have an error in it, add "error" class to it so that it is highlighted in red color for visibilty sakes
$("#last_name").addClass('error');
//Automatically focus this field because it has an error in it.
$("#last_name").focus();
e.preventDefault();
}
});
});
</script>All of the new code is heavily commented. So feel free to read it & If you have any questions, just post them in your comments below.
That’s it!
What do you think of these ways to use jQuery to validate textbox? Did they help you understand how validation works? Do you have any questions/suggestions? Feel free to state them by commenting below.