Invalid regular expression in HTML5 input pattern in email input

Question

I need to use this regular expression in a HTML input (Email Type), I used to create a regex here to match what we wanted to validate http://regexr.com/3gib9

Regex

/^([A-Z|a-z|0-9](\.|_){0,1})+[A-Z|a-z|0-9]\@([A-Z|a-z|0-9])+((\.){0,1}[A-Z|a-z|0-9]){2}\.(com|net|org|co|org)+((\.[A-Z|a-z|0-9]{2,4})?)$/gm

Pattern

^([A-Z|a-z|0-9](\.|_){0,1})+[A-Z|a-z|0-9]\@([A-Z|a-z|0-9])+((\.){0,1}[A-Z|a-z|0-9]){2}\.(com|net|org|co|org)+((\.[A-Z|a-z|0-9]{2,4})?)$

Element with Pattern

<input type="email" pattern="^([A-Z|a-z|0-9](\.|_){0,1})+[A-Z|a-z|0-9]\@([A-Z|a-z|0-9])+((\.){0,1}[A-Z|a-z|0-9]){2}\.(com|net|org|co|org)+((\.[A-Z|a-z|0-9]{2,4})?)$" name="email" class="form-control" placeholder="email address" value="<%= session("user_email_addr") %>" required="required" title="Please input a valid email">

And now I am getting this error (Invalid Escape) when I input any email in the form

Pattern attribute value ^([A-Z|a-z|0-9](\.|_){0,1})+[A-Z|a-z|0-9]\@([A-Z|a-z|0-9])+((\.){0,1}[A-Z|a-z|0-9]){2}\.(com|net|org|co|org)+((\.[A-Z|a-z|0-9]{2,4})?)$ is not a valid regular expression: Uncaught SyntaxError: Invalid regular expression: /^([A-Z|a-z|0-9](\.|_){0,1})+[A-Z|a-z|0-9]\@([A-Z|a-z|0-9])+((\.){0,1}[A-Z|a-z|0-9]){2}\.(com|net|org|co|org)+((\.[A-Z|a-z|0-9]{2,4})?)$/: Invalid escape

How can I made this work?

Answer 1

You need to remove unnecessary escaping backslashes and wrong | inside character classs, and just redundant constructs:

pattern="([A-Za-z0-9][._]?)+[A-Za-z0-9]@[A-Za-z0-9]+(\.?[A-Za-z0-9]){2}\.(com?|net|org)+(\.[A-Za-z0-9]{2,4})?"

See a demo below:

input:valid {
  color: green;
}
input:invalid {
  color: red;
}

<form name="form1"> 
 <input pattern="([A-Za-z0-9][._]?)+[A-Za-z0-9]@[A-Za-z0-9]+(\.?[A-Za-z0-9]){2}\.(com?|net|org)+(\.[A-Za-z0-9]{2,4})?" title="Wrong email!"/>
 <input type="Submit"/> 
</form>

Details

• ^...$ - the anchors are not necessary in HTML5 pattern since the regex is anchored by default (^(?: and )$ are added to the pattern automatically when translated into a regex)
• [A-Z|a-z|0-9] - the | inside a character class is treated as a literal | symbol, not as an alternation operator
• (\.|_){0,1} - the single char alternation makes little sense when one can use a character class, [._] is a more natural construct here. Besides, {0,1} is more naturally written as ? quantifier.
• \@ - the Culprit! - this char does not have to be escaped, and can't be escaped in an ES6 regex pattern that has a u modifier (this is a regex that HTML5 pattern translates into, e.g. pattern="[A-Z]" will be translated into /^(?:[A-Z])$/u regex)
• (com|net|org|co|org) can be reduced to (com?|net|org): com? matches com and co (thus, co alternative may be removed) and org is repeated twice.

There might be other enhancements here, but you can also just use

type="email"

HTML5 email validation attribute.