Use “@” in html5 input pattern attribute with MVC

Question

Does anyone know how I can use a "@" within the pattern attribute on a HTML5 email input having a MVC page?

<input type="email" pattern="^[a-zA-Z0-9._+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$">

At runtime I get this error:

"[" is not valid at the start of a code block. Only identifiers, keywords, comments, "(" and "{" are valid.

When I use "data-pattern" instead of "pattern" I can escape it with "@@", but with "pattern" that fails too.

Thanks in advance :)

Dirk Pennings · Accepted Answer · 2013-05-10 08:05:05Z

up vote 8 down vote accepted

It can be done 2 ways:

Render the "@" through razor:

<input type="email" pattern="^[a-zA-Z0-9._+-]+@("@")[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$">

With a HTML encode:

<input type="email" pattern="^[a-zA-Z0-9._+-]+&#64;[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$">

Thanks go out to my backend development colleague Tim :)

answered May 10 '13 at 8:05

Dirk Pennings

719415

Great stuff, not sure why this hasn't got more upvotes! – Adam Marshall Dec 16 '13 at 11:04

add a comment |

1 Answer 1