Validation of an email input in html5 within Razor application

Question

I have a razor application in which i'd like to add an email validation in a view

  <td><input type="text" name="mail" placeholder="[email protected]" required autofocus title="" pattern="/^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$/"/> </td>

but here I got this syntactic error

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

What is the issue ? How can i fix it?

Answer 1

try escape the @ with @@.

if not, put it in "{" or "(" and check.

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,9}$">

With a HTML encode:

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