HTML input pattern attribute won't validate some regex expression

Question

I have an an email type input which has an email validation pattern attribute set up that doesn't seem to trigger as expected.

<form>
  <input type="email" placeholder="enter your email" pattern="[A-Za-z0-9._+\-\']+@[A-Za-z0-9.\-]+\.[A-Za-z]{2,}$" required>
  <button>submit</button>
</form>

It's kind of weird cause part of it works. The regex exp is supposed to be matched only after some text and a dot and some text again is added after the @ sign. But is also matched instead with no dot and characters after a someText@sometext pattern. I've tested it on some online tools like regextester and works fine.

Does this answer your question? [Regex Email validation](https://stackoverflow.com/questions/5342375/regex-email-validation) — Cjmarkham, Jun 27 '23 at 15:24
It doesn't appear to be using the _pattern_ you're specifying, just the default one. _[MDN – – pattern](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email#pattern)_. Additionally, _[MDN – – pattern validation](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email#pattern_validation)_. — Reilas, Jun 27 '23 at 16:07

score 1 · Answer 1 · answered Jun 27 '23 at 16:44

Interesting question, as there are not many similar reports.

Here is the console log from DevTools.

12:13:04.218 example.html:1 Pattern attribute value [A-Za-z0-9._+\-\']+@[A-Za-z0-9.\-]+\.[A-Za-z]{2,}$ is not a valid regular expression: Uncaught SyntaxError: Invalid regular expression: /[A-Za-z0-9._+\-\']+@[A-Za-z0-9.\-]+\.[A-Za-z]{2,}$/v: Invalid escape

MDN – Regular Expressions – Character class.

"... In addition to ] and \, the following characters must be escaped in character classes if they represent literal characters: (, ), [, {, }, /, -, |. This list is somewhat similar to the list of syntax characters, except that ^, $, *, +, and ? are not reserved inside character classes ..."

So, escaping is not required for the apostrophe, '.

[A-Za-z0-9._+\-']+@[A-Za-z0-9.\-]+\.[A-Za-z]{2,}$

score 0 · Accepted Answer · answered Jun 27 '23 at 16:34

According to the docs:

If the specified pattern is not specified or is invalid, no regular expression is applied and this attribute is ignored completely.

<input type="email"> | MDN

The specified pattern is compiled with the u flag, which prevents meaningless escapes. Yours has one: \'; simply remove the backslash to make the pattern valid.

Also, the last $ is not necessary as HTML adds it by default, as with ^.

Try it:

input:invalid {
  outline: 1px solid red;
}

<form>
  <input
    type="email"
    placeholder="enter your email"
    pattern="[A-Za-z0-9._+\-']+@[A-Za-z0-9.\-]+\.[A-Za-z]{2,}"
    value="someText@sometext"
    required
  >
  <button>submit</button>
</form>

score -1 · Answer 3 · answered Jun 27 '23 at 15:21

-1

try this: add ^ before the pattern

<form>
  <input type="email" placeholder="enter your email" pattern="^[A-Za-z0- 9._+\-']+@[A-Za-z0-9.\-]+\.[A-Za-z]{2,}$" required>
  <button>submit</button>
</form>

answered Jun 27 '23 at 15:21

lareb

98
6

Same thing. btw, I didn't add it cause I read in a post the pattern adds it implicitely. – DigitNerd Jun 27 '23 at 15:41

HTML input pattern attribute won't validate some regex expression

3 Answers3