Email Validation with HTML5 Required Attribute plus Regular Expression Pattern

Question

I'm using the native HTML5 validation for an "email" field and it works fine! However, I would like to increase it to a specific case, where I do not want to accept emails with "free" domains (gmail, hotmail, etc).

I did the regular expression and tested it and it worked correctly (Here you can do the test: https://regex101.com/r/wBt3YN/1). But when applying to the pattern of the email field, nothing happens.

How to proceed?

Some strings:

[email protected] -> Can't allow

[email protected] -> Can allow

[email protected] -> Can't allow

Regex Pattern

^([\w-.]+@(?!gmail\.com)(?!yahoo\.com)(?!hotmail\.com)(?!mail\.com)(?!live\.com)(?!aol\.com)(?!outlook\.com)(?!bol\.com)(?!msn\.com)(?!ymail\.com)([\w-]+.)+[\w-]{2,4})?$

My form

<form> <div class="field"> <label for="email">Email Corporativo</label> <input type="email" name="email" id="email" value="" pattern="^([\w-.]+@(?!gmail\.com)(?!yahoo\.com)(?!hotmail\.com)(?!mail\.com)(?!live\.com)(?!aol\.com)(?!outlook\.com)(?!bol\.com)(?!msn\.com)(?!ymail\.com)([\w-]+.)+[\w-]{2,4})?$" title="Utilize seu email corporativo" placeholder="" required > </div> <input type="submit" value="ENVIAR"> </form>

Did you test your assertions about how the form is being processed using web client dev tools? — user1531971
– user1531971, Commented Sep 13, 2018 at 14:42
Most browsers have a "developer" mode. For example, Chrome on Windows uses F12. Your browser/platform may be different, but simply searching "browser developer mode" will get you all the info you need. — user1531971
– user1531971, Commented Sep 13, 2018 at 14:54
Where can i see some useful information about that on my console? — Maykel Esser
– Maykel Esser, Commented Sep 13, 2018 at 15:04

enxaneta · Accepted Answer · 2018-09-13 15:34:00Z

Here is my code where I do not allow yahoo & hotmail. However, e-mail validation is a very delicate thing.

<form> <div class="field"> <label for="email">Email Corporativo</label> <input type="email" name="email" id="email" value="" pattern="^[^@]+@(?!(yahoo|hotmail))[^@]+\.[a-z]{2,}$" title="Utilize seu email corporativo" placeholder="" required > </div> <input type="submit" value="ENVIAR"> </form>

Collectives™ on Stack Overflow

Email Validation with HTML5 Required Attribute plus Regular Expression Pattern

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related