Email Validation in pure JavaScript | Validate email address

In email validation in javascript is a very important module while validating simple an HTML web form. In this web page I have learn all about how to validate an email address using pure JavaScript with examples :

Simple Email Validation in JavaScript – Step by Step

I can simple validation in javascript the email by the uses of Pure JS.

There are Two types of the Email validation regex in JS.

  • Basic Validation
  • Data Format Validation

javascript Form validation Source code
javascript Form validation Source code

There are lots of the criteria that required to be bellow to user validate or check the email id is valid or not such as:
How to validate email address in JavaScript?

  • first of all user email id must data string available the @ and . character
  • Email must be at least single character before as well as after the special character @.
  • Email must be at least 2 or more characters after the special character like as a . (dot).
  • Let’s display the best example to check or validate the email id field.
  • use a Digits (0-9).
  • also you can use a Characters like as a! # $ % & ‘ * + – / = ? ^ _ ` { | } ~ some special char.
  • using Uppercase (A-Z) as well as lowercase (a-z) niche related English letters.
Read Also:  PHP Laravel group concat operation

JavaScript – Form Validation

here display Validate email address textbox using JavaScript source code

<html>   
   <head>
      <title>js Form Validation - www.pakainfo.com</title>      
		<script type = "text/javascript">
		      function EmailValidationJS() {
		      
		         if( document.pakainfo.Name.value == "" ) {
		            alert( "Please Eneter your name!" );
		            document.pakainfo.Name.focus() ;
		            return false;
		         }
		         if( document.pakainfo.useEmailAddressId.value == "" ) {
		            alert( "Please Eneter your Email!" );
		            document.pakainfo.useEmailAddressId.focus() ;
		            return false;
		         }
		         if( document.pakainfo.Zip.value == "" || isNaN( document.pakainfo.Zip.value ) ||
		            document.pakainfo.Zip.value.length != 5 ) {
		            
		            alert( "Please Eneter a zip in the format #####." );
		            document.pakainfo.Zip.focus() ;
		            return false;
		         }
		         if( document.pakainfo.Country.value == "-1" ) {
		            alert( "Please Eneter your country!" );
		            return false;
		         }
		         return( true );
		      }
		</script>     
   </head>
   
   <body>
      <form action = "" name = "pakainfo" onsubmit = "return(EmailValidationJS());">
         <table cellspacing = "2" cellpadding = "2" border = "1">
            
            <tr>
               <td align = "right">User Name</td>
               <td><input type = "text" name = "Name" /></td>
            </tr>
            
            <tr>
               <td align = "right">User EMail</td>
               <td><input type = "text" name = "useEmailAddressId" /></td>
            </tr>
            
            <tr>
               <td align = "right">User Zip Code</td>
               <td><input type = "text" name = "Zip" /></td>
            </tr>
            
            <tr>
               <td align = "right">User Country</td>
               <td>
                  <select name = "Country">
                     <option value = "-1" selected>[choose yours]</option>
                     <option value = "1">USA</option>
                     <option value = "2">UK</option>
                     <option value = "3">INDIA</option>
                  </select>
               </td>
            </tr>
            
            <tr>
               <td align = "right"></td>
               <td><input type = "submit" value = "Submit" /></td>
            </tr>
            
         </table>
      </form>      
   </body>
</html>

Example of valid email id

Read Also:  Registration Form Validation using Ajax in Codeigniter

The domain name consists of

  1. use a hyphens
  2. use a dots
  3. use a letters
  4. use a digits

Example of invalid email id

  • admininfo.pakainfo.com [@ is not present]
  • [email protected] [ tld (Top Level domain) can not start with dot “.” ]
  • @you.me.net [ No character before @ ]
  • [email protected] [ “.b” is not a valid tld ]
  • [email protected] [ tld can not start with dot “.” ]
  • [email protected] [ an email should not be start with “.” ]
  • admininfo()*@gmail.com [ there the regular expression only allows character, digit, underscore, and dash ]
  • [email protected] [double dots are not allowed]

JavaScript email validation

To simple HTML Form with validate email address using a JavaScript source code, so you cna check the some condition for use a at least single “@” as well as “.” i.e. for [email protected] . so Let’s try the bellow some source code to validate email Id.

<html>
<body>
<script>  
function EmailValidationJS()  
{  
var x=document.pakainfo.email.value;  
var specialatstr=x.indexOf("@");  
var checkdotContains=x.lastIndexOf(".");  
if (specialatstr<1 || checkdotContains<specialatstr+2 || checkdotContains+2>=x.length){  
  alert("Please enter Your a valid e-mail ID address \n atpostion:"+specialatstr+"\n checkdotContains:"+checkdotContains);  
  return false;  
  }  
}  
</script>  
<body>  
<form name="pakainfo"  method="post" action="" onsubmit="return EmailValidationJS();">  
Please Eneter Your Email: <input type="text" name="email"><br/>  
  
<input type="submit" value="Sign up">  
</form>  
</body>
</html>

Data Format Validation

<script type = "text/javascript">
      function EmailValidationJS() {
         var useEmailAddress = document.pakainfo.useEmailAddressId.value;
         atpos = useEmailAddress.indexOf("@");
         dotpos = useEmailAddress.lastIndexOf(".");
         
         if (atpos < 1 || ( dotpos - atpos < 2 )) {
            alert("Please enter Your correct email ID")
            document.pakainfo.useEmailAddressId.focus() ;
            return false;
         }
         return( true );
      }
</script>

I hope you get an idea about email validation in javascript on button click.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

Read Also:  Reusable PHP CRUD DATABASE FUNCTIONS

Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  PHP Download Images From URL Using cURL Example
  2. Read Also:  Validate Email Password Using jQuery
  3. Read Also:  Laravel 7 User Login Authentication From Scratch
  4. Read Also:  How to Multiple urls in one Ajax call
  5. Read Also:  JavaScript Automatically Page Redirection
  6. Read Also:  WooCommerce Get Product ID
  7. Read Also:  simple email validation in javascript
  8. Read Also:  Login with Facebook and Twitter
  9. Read Also:  PHP Parse URL Querystring Into Array
  10. Read Also:  Registration Form Validation using Ajax in Codeigniter