Validate Email And Password Using jQuery

Friday, Jan 27, 2017

Tags:- jQuery HTML CSS


Validation is always important for both website security and user personal data you have to validate each and every user entered data for eg check user email on form submission whether email is valid or not and check password strength whether the password is tough or not etc there are various type of validation we can do but in this tutorial we will show you how to validate email and password using jQuery.You may also like password strength checker using jQuery.


See Demo
Validate Email And Password Using jQuery


To Validate Email And Password It Takes Only Two Steps:-

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


Step 1.Make a HTML file and define markup and scripting

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

<html>
<head>
<link href="validate_style.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function validate()
{
 var email=$("#email").val();
 var pass=$("#password").val();
 
 var email_regex=/^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
 var password_regex1=/([a-z].*[A-Z])|([A-Z].*[a-z])([0-9])+([!,%,&,@,#,$,^,*,?,_,~])/;
 var password_regex2=/([0-9])/;
 var password_regex3=/([!,%,&,@,#,$,^,*,?,_,~])/;

 if(email_regex.test(email)==false)
 {
  alert("Please Enter Correct Email");
  return false;	
 }
 else if(pass.length<8 || password_regex1.test(pass)==false || password_regex2.test(pass)==false || password_regex3.test(pass)==false)
 {
  alert("Please Enter Strong Password");
  return false;
 }
 else
 {
  return true;
 }
}
</script>
</head>
<body>
<div id="wrapper">

<div id="form_div">
<p id="form_label">SIGNUP FORM</p>
 <form method="post" onsubmit="return validate();">
  <input type="text" id="email" placeholder="Enter Email">>
  <input type="password" id="password" placeholder="*******">>
  <input type="submit" value="SUBMIT">
 </form>
<p id="form_note">Password Must Be At Least 8 Digits Long And Contains One UpperCase, One LowerCase And One Special Character</p>
</div>

</div>
</body>
</html>

In this step we create a form to validate data we use to validate data when user enter all details and clicks on submit button which calls validate() function.In validate() function we get email and password value and write regular expressions for both email and password for validation.We test the value of email with our email_regex and check if email is valid or not if email is not valid we alert the user that your email is not valid and for password we test it with password_regex1 which check if password contains atleast one uppercase and lowercase alphabet, password regex2 checks number and password_regex3 checks special character if password contains all these we submit the form else we display alert for user to enter strong password.You may also like suggest email id on registration using ajax and PHP.



Step 2.Make a CSS file and define styling

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

body
{
 margin:0 auto;
 padding:0px;
 text-align:center;
 width:100%;
 font-family: "Myriad Pro","Helvetica Neue",Helvetica,Arial,Sans-Serif;
 background-color:#ECF0F1;
}
#wrapper
{
 margin:0 auto;
 padding:0px;
 text-align:center;
 width:995px;
}
#wrapper h1
{
 margin-top:50px;
 font-size:45px;
 color:#626567;
}
#wrapper h1 p
{
 font-size:18px;
}
#form_div
{
 background-color:#B3B6B7;
 width:300px;
 margin-left:330px;
 padding:10px;
}
#form_div #form_label
{
 margin:0px;
 margin-bottom:20px;
 font-size:25px;
 font-weight:bold;
 color:#626567;
 text-decoration:underline;
}
#form_div input[type="text"],input[type="password"]
{
 width:250px;
 height:35px;
 padding:10px;
 margin-top:5px;
}
#form_div input[type="submit"]
{
 width:248px;
 height:35px;
 margin-top:5px;
 margin-left:-3px;
 background:none;
 border:1px solid white;
 color:white;
 font-weight:bold;
}
#form_div #form_note
{
 color:#424242;
 font-size:14px;
 font-style:italic;
}

You can view our form validation using jQuery to validate complete form.That's all, this is how to validate email and password using jQuery.You can customize this code further as per your requirement. And please feel free to give comments on this tutorial.

Join Us With Our 21000+ Subscribers And Get Our Latest Tutorials Update Via Email