Discussion on: Using Regex in JavaScript to Validate Email

[Ben Sinclair]

If it's front-end you're working on, having an input field be of type=email will do you well enough, and email addresses are notoriously complicated. As a trivial example, "[e-mail]" will pass that validation, but "[e-mail]" won't. The same with "moopet@127.0.0.1" (works) and "moopet@127.0.0.0.0.0.123456" (apparently this is also valid...) "moopet@localhost" is a valid email address but won't pass your regex. I'm sure there are plenty more exceptions.

I'm not saying it's wrong to do these sorts of tests, but you're going to annoy someone at some point who's trying and failing to sign up to your site and has an address that works find everywhere else.

EDIT: it's amusing that DEV automatically makes most of those into email links (except "moopet@localhost") so I guess they're using something that checks @ and . and that's all.

[James]

Hey, thanks for letting me know about this! I actually used type=email in my input field too, but the reason for using this regex was to help me detect invalid email address according to it and show some alert on the frontend.

Do you know if input field send some sort of event or something that I could catch to fully replace regex with type=email in the input field?

[Ben Sinclair]

No, sorry, I don't know much about it really beyond that! I'm pretty sure there's the pattern attribute you can use, but the html5pattern page on email regex recommends against using it that way.

[JoelBonetR 🥇]

Hi @james

Check this:

Form input validation WITHOUT JavaScript

JoelBonetR ・ Aug 15 ・ 2 min read

#css #tutorial #webdev #html

Best regards

[JoelBonetR 🥇]

yup, the interpreters usually don't mind about email addresses without domain, because @localhost is only reachable in your own context so... why bother?

You're right about the rest.

Currently with the RFC5322 you can get a 99.99% valid regex if you need it but it's a bit... well... judge by yourself:

(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])

Source

I won't actually recommend using it unless it's completely necessary.