HTML5 Pattern to email field

Question

I am learning how HTML5 pattern works, and I am trying do a email field validation.
The problem is that when I add the '@' in the pattern, when I try, the field does not consider it valid. If I try the pattern without '@' works perfectly.

Requirements of the validation:

-> starts with 5 characters or numbers
-> then goes an @
-> continuous with a range between 2 and 10 characters or numbers
-> then .
-> must have 'es', 'org' or 'com'

CODE:
<input type="text" name="email" id="email" pattern='^[a-zA-Z0-9]{5}@[a-zA-Z0-9]{2,10}.(es|com|org)$'>

PD: I know the email field exists, but I'm testing the html5 patterns.

Note: the `` tag does not use and does not need a closing slash and never has in HTML. — Rob, Sep 24 '20 at 23:48
Does this answer your question? [How to validate an email address using a regular expression?](https://stackoverflow.com/questions/201323/how-to-validate-an-email-address-using-a-regular-expression) — Liam, Sep 25 '20 at 07:25
@JakeGrossman oh,**it works** I were trying in online regex tester surronding with quotes. — Adrian98do, Sep 25 '20 at 07:30

score 2 · Answer 1 · answered May 14 '21 at 16:08

2

The WHATWG community shared this JavaScript- and Perl-compatible regular expression that matches the HTML5 type="email".

https://html.spec.whatwg.org/multipage/input.html#valid-e-mail-address

/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/

answered May 14 '21 at 16:08

James Moberg

4,360
1
22
21

How can I make this compatible for c#? With the code above as a matching pattern in C#, using "..." instead of /.../, the \/ and \. are seen as an 'unrecognized escape character', and thus give an error. I left the first \ out, and replaced the \. for \x2e. It seems to work well. However, with my limited Regex skills, I hope I don't mess up the pattern now and start to allow incorrect emailadresses. So please let me know if there are compatible c# patterns – Tim Hage Mar 30 '22 at 14:53
I'm not sure. Doesn't C# have an email validation function? (I'm a cfml/java developer and use the built-in isValid("email") function or a 3rd-party library that performs DNS A/MX record lookups.) – James Moberg Mar 31 '22 at 15:06
Ah I got it, just use @"...." instead of /.../ seems to do the job in C# – Tim Hage Apr 05 '22 at 07:09

score 0 · Answer 2 · edited Sep 28 '20 at 14:11

0

you can use type= "email" in html 5. that will validate email but to validate email on specific pattern you need to write regex in jquery/javascript.

https://www.w3resource.com/javascript/form/email-validation.php

edited Sep 28 '20 at 14:11

Dharman

30,962
25
85
135

answered Sep 28 '20 at 14:05

rock

348
4
18

HTML5 Pattern to email field

2 Answers2