I'm trying to validate an email input via HTML5 pattern.
The input field must follow this format:
[email protected]
In other words I need to check if there is a string of letters + a dot + another string of letters + must contain the string simon.
So far I've found
pattern=".*simon.+"
However, it only checks if the input contains simon.
Help would be highly appreciated!
You may use
pattern="\S+\.\S+@\S*simon\S*\.\S+"
The pattern gets parsed as /^(?:\S+\.\S+@\S*simon\S*\.\S+)$/ and matches
^ - start of string(?: - start of a non-capturing container group\S+\.\S+ - 1+ non-whitespace chars, . and 1+ chars other than whitespace@ - a @ char\S* - 0+ non-whitespace charssimon - a literal substring\S* - 0+ non-whitespace chars\. - a dot\S+ - 1+ non-whitespace chars) - end of the container group$ - end of string.HTML5:
input:valid {
color: black;
}
input:invalid {
color: red;
}<form name="form1">
<input pattern="\S+\.\S+@\S*simon\S*\.\S+" title="Please enter an email address with 'simon' in the domain name!" placeholder="[email protected]" value="[email protected]" />
<input type="Submit"/>
</form>If you want to "controll" the dots in the pattern, replace \S with [^\s.] that matches any char but a whitespace and ..
pattern="\S+\.\S+@\S*simon\S*\.\S+"