Inline Email validation with regex pattern

by Daniel Hug

HTML

<input type="email" required pattern="^\S+@(([a-zA-Z0-9]([a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,6})$"/>

<p>Enter your email above.<br/>
If the input is green then you can use the following regex:</p>
<code>^\S+@(([a-zA-Z0-9]([a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,6})$</code>

CSS

input {
    box-sizing: border-box;
    width: 100%;
    padding: 10px;
}
input:valid {
    background: #afa; /* green input*/
}
input:invalid {
    background: #faa; /* red input */
}
code {
    display: block;
    padding: 12px;
    background: #ccc;
}