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.
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
You can download the full source code of this example here: html5emailvalidation
