Menu
The <input type="email"> defines a field for an e-mail address. The input value is automatically validated to ensure it is a properly formatted e-mail address. To define an e-mail field that allows multiple e-mail addresses, add the "multiple" attribute.
An <input> element with type="email" that must be in the following order: [email protected] (characters followed by an @ sign, followed by more characters, and then a "."
Form validation can happen on the client side and the server side. Client side validation occurs using HTML5 attributes and client side JavaScript.
Also, HTML5 validation helps users inputting data by providing specific controls, such as date pickers and custom on-screen keyboards. HTML5 input types are displayed as simple text input fields in older web browsers that do not support these HTML5 features. The example below shows these HTML5 input types in action.
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:
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.!#$%&’*+/=?^_`{|}~-]+@[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.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/"
required
>
Using [a-zA-Z0-9.-_]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,} for [email protected] / [email protected]
document.getElementById("email").validity.valid
seems to be true when field is either empty or valid. This also has some other interesting flags:
Tested in Chrome.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With