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.