HTML5 Email Validation

110

It is said "With HTML5, we need no more js or a server side code to check if the user's input is a valid email or url address"

How can I validate email after a user enter? and without JS how to display a message if the user enter a wrong form of his/her email address.

<input type="email" pattern="[^ @]*@[^ @]*" placeholder="Enter your email">
<input type="submit" value="Submit">

This question is tagged with html email

~ Asked on 2013-10-26 10:48:05

The Best Answer is


125

In HTML5 you can do like this:

<form>
<input type="email" placeholder="Enter your email">
<input type="submit" value="Submit">
</form>

And when the user press submit, it automatically shows an error message like:

Error Message

~ Answered on 2013-10-26 10:56:23


48

The input type=email page of the www.w3.org site notes that an email address is any string which matches the following regular expression:

/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-][email protected][a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/

Use the required attribute and a pattern attribute to require the value to match the regex pattern.

<input
    type="text"
    pattern="/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-][email protected][a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/"
    required
>

~ Answered on 2014-10-09 07:31:32


Most Viewed Questions: