[bs-quote quote=”You should never trust anything coming from the clients, server-side validation should be in order no matter how great the HTML or JS is.” style=”style-17″ align=”left”][/bs-quote]
Till the time when HTML5 was not introduced, you have to write some custom javascript or use a 3rd party library to validate the user input values, like email validation. However, the introduction of HTML5 solved this by providing more legal values for the <input /> elements type attribute. In this journal entry we will be looking at one of the most important aspect of that “HTML5 Email Validation”.
HTML5 Email Validation
The very basic use which HTML5 email validation provide is the type=”email”. Use this in the <input /> element and you are all set to validate the input box as email.
<input type="email" />
HTML5 compatible browsers, like Microsoft Edge, Mozilla Firefox, Google Chrome will aid the user in entering a valid email address.
There’s a catch in this validation, this is not gonna catch errors like user entering info@developersjournal instead of info@developersjournal.in. By specifications , email doesn’t require a top level domain, as this is perfectly valid email when the user is on a local network.
But in real life scenarios, we all have to deal with users entering a proper email addresses to the likes of hotmail.com, outlook.com, gmail.com, etc. To accomplish this, we will be extending our <input /> element by declaring a new attribute “pattern”.
<input type="email"
pattern="/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/" />
Now, the browser will help the user to provide a valid email entry including the top level domain (e.g. .com or .in).
With the applied pattern, the user is requested to enter at least two characters after the dot, which should fit most use cases with the top level domains.