Invalid emails being accepted by Webflow form

Design help General
1

Hey there,

It’s a single field email sign-up form and at the moment it’s allowing non-emails e.g. “test@test” to be submitted which then flags as a possible error in Zapier and Klaviyo.

Other forum posts say that in HTML5, this is a valid email entry, but in practice that kind of email isn’t useful – is there a way of making it a requirement to have a valid domain ending on the email before it can be submitted e.g. “test@test.co” ?

Another forum post linked to this article about validation – <input type="email"> - HTML: HyperText Markup Language | MDN

For my use-case this part of the article would be sufficient:

  1. A single properly-formed e-mail address. This doesn’t necessarily mean the e-mail address exists, but it is at least formatted correctly. In simple terms, this means username@domain or username@domain.tld. There’s more to it than that, of course; see Validation for a regular expression that matches the e-mail address validation algorithm.

Can anyone shed any light on how to add the code into Webflow to make this level of email validation happen?

Here is my site Read-Only: (Webflow - Sequence)

2

Yes.

You can test the regex I use here if you like;
https://validate-emails.webflow.io/

Here’s how to validate your own email field.

In the designer, select your Email Input element, and add a custom attribute.
Name the attribute pattern, and paste in this value…

(?:[a-z0-9!#$%&amp;'*+/=?^_{|}~-]+(?:.[a-z0-9!#$%&amp;'*+/=?^_{|}~-]+)*|&quot;(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*&quot;)@(?:(?:[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])+)\])

I’ve seen a lot of requests for this, so here’s a cloneable;

And more details on the approach;

3 Likes
3

This is a thing of beauty, thank you for sharing – have added to the live-site here www.sequencehq.com

4

Ha ha yes the HTML5 specification team got a lot of things right.

5

Hey @memetican, seems like your live site is broken and the pattern does not work anymore to avoid foo@bar to be submitted, any idea what needs to be changed in order for this to work again? :thinking:
Thanks a lot in advance!

6

Hey Carl, thanks for sharing this. Are you using Google Chrome?
Chrome appears to have introduced a bug with patterns earlier this year. I’ll do a bit of research on this, but it looks like it is having a problem processing hyphens in the regex pattern.

Here’s a much simpler one that’s working on my Chrome.
Give this a go and let me know if it works for you.

^[A-Z0-9a-z._%+\-]+@[A-Za-z0-9.\-]+\.[A-Za-z]{2,64}$

Here’s an even looser match, also working for me;

^[\w\-\.]+@([\w\-]+\.)+[\w\-]{2,10}$