✖

All TalkersCode Topics

Follow TalkersCode On Social Media

✖

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

Validate Email And Password Using jQuery

Last Updated : Jul 1, 2023

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

In this tutorial we will show you how to validate email and password using jQuery, 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.

You may also like password strength checker using jQuery.

Validate Email And Password Using jQuery

CHECK OUT THIS TUTORIAL LIVE DEMO →

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. I hope this tutorial on email and password validation using jQuery helps you and the steps and method mentioned above are easy to follow and implement.

CHECK OUT THIS TUTORIAL LIVE DEMO →