✖

All TalkersCode Topics

Follow TalkersCode On Social Media

✖

devloprr.com - A Social Media Network for developers Join Now ➔

Form Validation Using jQuery

Last Updated : Jul 1, 2023

IN - jQuery HTML CSS | Written & Updated By - Ashish

In this tutorial we will show you how to do form validation on client side using jQuery, Form validation is a process used to check form data fields before and after submitting the form.

It is very important process because it almost prevent the user to send any malicious data which is not good for your database or other things and it also prevents database injections, form validation can be both server-side or client-side.

You may also like Validate The Form Data Using JavaScript And PHP

Form Validation Using jQuery

CHECK OUT THIS TUTORIAL LIVE DEMO →

To Do Form Validation Using jQuery It Takes Only Three Steps:-

  1. Make a HTML file and define markup
  2. Make a js file and define scripting
  3. Make a CSS file and define styling

Step 1. Make a HTML file and define markup

We make a HTML file and save it with a name validate.html 

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="validate_script.js"></script>
<link rel="stylesheet" type="text/css" href="validate_style.css">
</head>
<body>
<div id="wrapper">
<form onsubmit="return check_form();">
<table align='center' cellspacing=5 cellpadding=10>

<tr>
<td>First Name</td>
<td>
<input type="text" id="fname" placeholder="First Name" onblur="check_fname();">
<br>
<span class='error_text' id='fname_error'></span>
</td>
</tr>

<tr>
<td>Last Name</td>
<td>
<input type="text" id="lname" placeholder="Last Name" onblur="check_lname();">
<br>
<span class='error_text' id='lname_error'></span>
</td>
</tr>

<tr>
<td>Email Id</td>
<td>
<input type="text" id="email" placeholder="Email Id" onblur="check_email();">
<br>
<span class='error_text' id='email_error'></span>
</td>
</tr>

<tr>
<td>Password</td>
<td>
<input type="password" id="pass" placeholder="*******" onblur="check_pass();">
<br>
<span class='error_text' id='pass_error'></span>
</td>
</tr>

<tr>
<td>Retype Password</td>
<td>
<input type="password" id="repass" placeholder="*******" onblur="check_repass();">
<br>
<span class='error_text' id='repass_error'></span>
</td>
</tr>

<tr>
<td>Country</td>
<td>
<input type="text" id="country" placeholder="Country" onblur="check_country();">
<br>
<span class='error_text' id='country_error'></span>
</td>
</tr>
</table>

<input type="submit" value="SUBMIT">
</form>
</div>

</body>
</html>

In this step we create a form and define 6 fields for user registration first name, last name, email, password, retype password, country and we use onblur event to check the form fields.

You may also like validate email and password using jQuery.

Step 2. Make a js file and define scripting

We make a js file and save it with a name validate_script.js 

var ok=0;
function check_fname()
{
 var f_val=$("#fname").val();
 if(f_val=="")
 {
  $("#fname").css({"border":"1px solid red"});
  $("#fname_error").text("First Name Must Be Filled!");
  $("#fname_error").css({"margin-top":"5px"});
 }
 else
 {
  $("#fname").css({"border":"1px solid grey"});
  $("#fname_error").text("");
  $("#fname_error").css({"margin-top":"0px"});
  ok++;
 }
}

function check_lname()
{
 var l_val=$("#lname").val();
 if(l_val=="")
 {
  $("#lname").css({"border":"1px solid red"});
  $("#lname_error").text("Last Name Must Be Filled!");
  $("#lname_error").css({"margin-top":"5px"});
 }
 else
 {
  $("#lname").css({"border":"1px solid grey"});
  $("#lname_error").text("");
  $("#lname_error").css({"margin-top":"0px"});
  ok++;
 }
}

function check_email()
{
 var email_val=$("#email").val();
 if(email_val=="" || email_val.indexOf("@")==-1 || email_val.indexOf(".")==-1)
 {
  $("#email").css({"border":"1px solid red"});
  $("#email_error").text("Email Must Be Filled And Valid!");
  $("#email_error").css({"margin-top":"5px"});
 }
 else
 {
  $("#email").css({"border":"1px solid grey"});
  $("#email_error").text("");
  $("#email_error").css({"margin-top":"0px"});
  ok++;
 }
}

function check_pass()
{
 var pass_val=$("#pass").val();
 if(pass_val=="" || pass_val.length<8)
 {
  $("#pass").css({"border":"1px solid red"});
  $("#pass_error").text("Password Must Be Filled And Greater Or Equal To 8!");
  $("#pass_error").css({"margin-top":"5px"});
 }
 else
 {
  $("#pass").css({"border":"1px solid grey"});
  $("#pass_error").text("");
  $("#pass_error").css({"margin-top":"0px"});
  ok++;
 }
}

function check_repass()
{
 var repass_val=$("#repass").val();
 if(repass_val=="" || repass_val!=$("#pass").val())
 {
  $("#repass").css({"border":"1px solid red"});
  $("#repass_error").text("Password Must Be Filled And Matched With Above!");
  $("#repass_error").css({"margin-top":"5px"});
 }
 else
 {
  $("#repass").css({"border":"1px solid grey"});
  $("#repass_error").text("");
  $("#repass_error").css({"margin-top":"0px"});
  ok++;
 }
}

function check_country()
{
 var country_val=$("#country").val();
 if(country_val=="")
 {
  $("#country").css({"border":"1px solid red"});
  $("#country_error").text("Country Must Be Filled!");
  $("#country_error").css({"margin-top":"5px"});
 }
 else
 {
  $("#country").css({"border":"1px solid grey"});
  $("#country_error").text("");
  $("#country_error").css({"margin-top":"0px"});
  ok++;
 }
}

function check_form()
{
 if(ok==6)
 {
  return true;
 }
 else
 {
  alert("Error! Check All The Fields");
  return false;
 }
}

In this step we made 7 functions to check the form fields one function for each form field and create ok variable to know all the fields are correctly entered and it will increment by 1 in every function success.

In first function we get first name value if the value is empty then it displays the error message.Second function is same like first function it gets last name value.

In third function we get the value of email and check if the value is empty and also check if the value contains '@' and '.' to ensure that the email is valid and if value does not contain '@' or '.' we display error message.

In fourth function we get the password value and if the value is empty or if the password length is less than 8 the it display the error message.

In fifth function we get the retype password value and check if both the password values are same or not and if not we display error message.

In sixth function we get the country value and if value is empty we display the error message.

In 7 function we check if the ok variable value is 6 because we have total 6 form fields and if all form fields are correctly filled then the final value of ok is 6 so we checked the ok and if the value is not equal to 6 we alert the user to recheck form fields.

You may also like Submit The Form Without Page Refresh Using Ajax And jQuery

Step 3. Make a CSS file and define styling

We make a CSS file and save it with a name validate_style.css 

body
{
 margin:0px; auto;
 padding:0px;
 font-family:helvetica;
 background-color:#D8CEF6;
}
#wrapper
{
 width:995px;
 padding:0px;
 margin:0px auto;
 font-family:helvetica;
 text-align:center;
}
form
{
 margin-left:300px;
 width:400px;
 margin-top:20px;
 padding:20px;
 background-color:#9F81F7;
 border-radius:3px;
}
td
{
 max-width:250px;
 color:white;
 font-weight:bold;
}
input[type="text"],input[type="password"]
{
 width:200px;
 height:35px;
 border-radius:3px;
 padding-left:5px;
 border:1px solid silver;
}
.error_text
{
 margin:0px;
 color:#DF013A;	
 font-weight:normal;
 font-size:14px;
}
input[type="submit"]
{
 background:none;
 border:none;
 background-color:#8000FF;
 color:white;
 width:100px;
 height:35px;
 border-radius:3px;
 font-size:16px;
 margin-top:20px;
}

Thats all, this is how to do form validation using jQuery. You can customize this code further as per your requirement. And please feel free to give comments on this tutorial.

I hope this tutorial on jquery form validation helps you and the steps and method mentioned above are easy to follow and implement.

CHECK OUT THIS TUTORIAL LIVE DEMO →