Home » HTML5 » HTML Email Validation Example

About Olayemi Odunayo

Olayemi Odunayo
I am a programmer and web developer, who has experience in developing websites and writing desktop and mobile applications. I have worked with both schematic and schemaless databases. I am also familiar with third party API and working with cloud servers. I do programming on the client side with Java, JavaScript, html, Ajax and CSS while I use PHP for server side programming.

HTML Email Validation Example

Sometimes we might have to create web apps that collect user data e.g names, date of birth, username, emails or even the user phone number. It is one thing to collect user data, its another thing to make sure that the user has entered valid information.

Want to be a HTML5 Ninja?

Subscribe to our newsletter and download the HTML5 Programming Cookbook right now!

In order to get you prepared for your HTML5 development needs, we have compiled numerous recipes to help you kick-start your projects. Besides reading them online you may download the eBook in PDF format!

 

For example we should always check durning user registration or login, if the email entered is valid or even in existence.
In this example we will learn how to validate users emails in HTML5.
For this example we will use:

  • A computer with a modern browser installed
  • notepad++

1. Getting Started

The Email supplied by a user during registration on a website, is used to identify the user. That’s why it is impossible for two different users to register with the same email. If a new user tries to register with an already registered Email, an error message is displayed on the browser and the registration process is terminated after verification by the server.
It is wise to validate a user email or any other data on the client side before sending the data to the server. This saves bandwith and helps free server resources.

In this example we will create a form that will collect user data and submit them.

1.1 HTML Forms

In this section we will introduce HTML forms. If you are familiar with HTML forms, you can skip this section and go to the next.

HTML forms allows users send data to a server or website.

If a website needs to collect a user name, age or date of birth it’s most likely going to use HTML forms. Login and registration systems for websites are built with html forms.

HTML forms are created with the opening <form> and closing </form>tag. The form tag defines an html form. Form elements are different, they can be text fields, checkboxes, radio buttons, submit buttons, and more.

1.1 Validating Emails

To validate Emails on the client side we use HTML5 special feature. One of great features of HTML5 is the ability to validate user input or data without having to write tedious scripts.

All input element can be validated with the pattern attribute. The pattern attribute expects a case sensitive regular expression as its value. If the element’s value is not empty and doesn’t match the regular expression specified by the pattern attribute, the element is considered invalid. A user won’t be able to submit a form with invalid input.

If an element requires an attribute before submission, just add required to the input tag.<input> elements with their type attribute set to the value email do not need a pattern attribute to be validated. Specifying the email type requires that the field’s value must be a well-formed email address (or a comma-separated list of email addresses if it has the mutiple attribute).

Lets look at an example:

index.html

<!DOCTYPE html> 
 <html lang=”en”> 
 <head>    
 <title>Membership Form</title>     
</head>
 <body>    
 <h1>Membership Form</h1>
    <p>Thanks for choosing to join The Programming Language Club.</p>
    <form action=index.php method=post>   
	<div style="width: 30em;" >
        <label for=firstName>First name</label><br>        <input type=text name=firstName id=firstName required /><br><br>


        <label for=lastName>Last name</label> <br>       <input type=text name=lastName id=lastName  required/><br><br>


 <label for=mail>Email</label><br>        <input type=email name=mail id=mail required /><br><br>



        <label for=password1>Choose a password</label> <br>       <input type=password name=password1 id=password1 required /> <br>  <br>  
		<label for=password2>Retype password</label><br>        <input type=password name=password2 id=password2 required /> <br> <br>
        <label for=genderMale>Are you male...</label>        <input type=radio name=gender id=genderMale value=Male />       
		<label for=genderFemale>...or female?</label> <input type=radio name=gender id=genderFemale value=Female checked /> <br> <br>
        <label for=favoriteWidget>What's your favorite language?</label>        <select name=favoriteWidget id=favoriteWidget size=1>        
		<option value=java>Java</option>     
		<option value=php>PHP</option>          
		<option value=phyton>PHYTON</option>     
		</select> <br> <br>
        <label for=newsletter>Do you want to receive our newsletter?</label>        
		<input type=checkbox name=newsletter id=newsletter value=yes /> <br> <br>
        <label for=comments>Any comments?</label>       
		<textarea name=comments id=comments rows=4 cols=50> </textarea>
        <div style=”clear: both;”>         
	<input type=submit name=submitButton id=submitButton value=Send Details />       
	<input type=reset name=resetButton id=resetButton value="Reset Form" style="margin-right: 20px;" />      
	</div>     
	</div>   
	</form>
  </body> </html>

This is a typical example of an HTML form but you should pay attention to line 17. Thats where we declare our input tag with type email. Fill all the fields in the form except that provided for email, try to submit and see what happens. Also enter an email address that is not properly formatted and submit it,see what happens.
In both cases an error message is displayed and the form is not submitted.

2. Summary

In this example we learnt about email validation in HTML5.

3. Download the source code

Download
You can download the full source code of this example here: html5emailvalidation

Do you want to know how to develop your skillset to become a Web Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you our best selling eBooks for FREE!

 

1. Building web apps with Node.js

2. HTML5 Programming Cookbook

3. CSS Programming Cookbook

4. AngularJS Programming Cookbook

5. jQuery Programming Cookbook

6. Bootstrap Programming Cookbook

 

and many more ....

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *

*

Want to take your WEB dev skills to the next level?

Grab our programming books for FREE!

Here are some of the eBooks you will get:

  • PHP Programming Cookbook
  • jQuery Programming Cookbook
  • Bootstrap Programming Cookbook
  • Building WEB Apps with Node.js
  • CSS Programming Cookbook
  • HTML5 Programming Cookbook
  • AngularJS Programming Cookbook