HTML5 input pattern for givenname.lastname@containsstring.domain

Question

I'm trying to validate an email input via HTML5 pattern.

The input field must follow this format:

givenname.lastname@simonsays.domain

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!

https://stackoverflow.com/questions/5601647/html5-email-input-pattern-attribute — Danimal, Jun 07 '18 at 19:14
You can trial-and-error your RegEx in https://regex101.com/ , It even has break-down explanation of what does your RegEx actually means — William Chong, Jun 07 '18 at 19:14
Wow, thank you Wiktor! I've been struggling with this issue for quite a long time but now it works like a charm! — Stephan, Jun 07 '18 at 19:23

Wiktor Stribiżew · Accepted Answer · 2018-06-07T19:49:23.003

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 chars
simon - 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="name.surname@domain.com" value="my.name@some-simon-here.com" />
 <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 ..

Thank you for this very useful explanation! – Stephan Jun 07 '18 at 20:36 — Stephan, Jun 07 '18 at 20:36

HTML5 input pattern for givenname.lastname@containsstring.domain

1 Answers1