Back to all Elements

Email Validation (Non-free / Work)

Excluding 100 of the most popular free email domains from using it in a Webflow form with JavaScript.

What the code does:

  1. When a user clicks the button with the `#btnSubmit` ID the verification function executes.
  2. Takes the variable email from the value of the field with the `#email` ID and compares it with the string from the variable reg.
  3. If no match - do nothing and continue with form submit.
  4. Any other result pops an alert with the text: "Please Enter Business Email Address".

* Be careful - ID's are case sensitive!

Add the next code before the </body> tag

<script>

 $(document).ready(function(e) {

   $('#btnSubmit').click(function() {

     var email = $('#email').val();

     var reg = /^([\w-\.]+@(?!gmail.com)(?!yahoo.com)(?!hotmail.com)([\w-]+\.)+[\w-]{2,4})?$/;

     

     if (reg.test(email)) {

       return 0;

     } else {

       $('.error-div').fadeIn().delay(3000).fadeOut('slow');

       return false;

     }

   });

 });

</script>

Copy

Now add a DIV with a classname .error-div and the "Please Enter Business Email Address" text in it. Place the DIV wherever you want in the document.

Hide the div with display:none.

I have shortened the free email list in this code snippet, so it will look better...

You can add or remove any email domain you desire. Keep it in this format:
`(?!any-domain.com)`

For example:

  • (?!gmail.com)
  • (?!yahoo.com)
  • (?!hotmail.com)

Here is the full list I use:

(?!gmail.com)(?!yahoo.com)(?!hotmail.com)(?!aol.com)(?!hotmail.co.uk)(?!hotmail.fr)(?!msn.com)(?!yahoo.fr)(?!wanadoo.fr)(?!orange.fr)(?!comcast.net)(?!yahoo.co.uk)(?!yahoo.com.br)(?!yahoo.co.in)(?!live.com)(?!rediffmail.com)(?!free.fr)(?!gmx.de)(?!web.de)(?!yandex.ru)(?!ymail.com)(?!libero.it)(?!outlook.com)(?!uol.com.br)(?!bol.com.br)(?!mail.ru)(?!cox.net)(?!hotmail.it)(?!sbcglobal.net)(?!sfr.fr)(?!live.fr)(?!verizon.net)(?!live.co.uk)(?!googlemail.com)(?!yahoo.es)(?!ig.com.br)(?!live.nl)(?!bigpond.com)(?!terra.com.br)(?!yahoo.it)(?!neuf.fr)(?!yahoo.de)(?!alice.it)(?!rocketmail.com)(?!att.net)(?!laposte.net)(?!facebook.com)(?!bellsouth.net)(?!yahoo.in)(?!hotmail.es)(?!charter.net)(?!yahoo.ca)(?!yahoo.com.au)(?!rambler.ru)(?!hotmail.de)(?!tiscali.it)(?!shaw.ca)(?!yahoo.co.jp)(?!sky.com)(?!earthlink.net)(?!optonline.net)(?!freenet.de)(?!t-online.de)(?!aliceadsl.fr)(?!virgilio.it)(?!home.nl)(?!qq.com)(?!telenet.be)(?!me.com)(?!yahoo.com.ar)(?!tiscali.co.uk)(?!yahoo.com.mx)(?!voila.fr)(?!gmx.net)(?!mail.com)(?!planet.nl)(?!tin.it)(?!live.it)(?!ntlworld.com)(?!arcor.de)(?!yahoo.co.id)(?!frontiernet.net)(?!hetnet.nl)(?!live.com.au)(?!yahoo.com.sg)(?!zonnet.nl)(?!club-internet.fr)(?!juno.com)(?!optusnet.com.au)(?!blueyonder.co.uk)(?!bluewin.ch)(?!skynet.be)(?!sympatico.ca)(?!windstream.net)(?!mac.com)(?!centurytel.net)(?!chello.nl)(?!live.ca)(?!aim.com)(?!bigpond.net.au)

Copy

Preview:

The videos Kurzgesagt channel creates are so beautifully animated, that I almost forget that I learn so much while watching them!

Might also interest you:

Changing Text

Interactions
Cloneable
Tricks

Change text in a sentence/headline with Webflow's interactions

Read more

Tabs with scrollable (sideways) Menu

Cloneable
Code
Design

A Webflow Tabs widget with some edits and custom code to make the menu scrollable on desktop & mobile

Read more

Contact form as a Chat widget

Cloneable
Code
Tricks

A contact form disguised as a chat widget.

Read more