Validating Emails

HTML5 has a built-in _email input type, and the Webflow designer supports it directly. However, many designers find that browser validation for email address fields is lacking for modern email addresses.

By itself, it will accept this as a valid email;

_foo@bar

Why? Well there's a lot of ancient history here, that says that's actually a valid email address... even though today, on the public Internet, you'd never see a domain like that.

So how do we prevent that?

In addition to setting the field type to email, we add the following custom attribute;

_pattern =

_{(?:[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])+)\])}

Best Practices

Combine validation techniques, they layer nicely.

In Webflow's designer;

1. Set the input type to email
2. Add the custom _pattern attribute above to validate your email
3. Optionally, make the field required
4. Optionally, improve error messaging. You can add a custom _title attribute to describe what is expected.

Demo

See this in action;

• Demo site
• Cloneable project

Resources

• General Email Regex - RFC 5322

Limitations

Technically, it's possible for email addresses to use non-standard characters, particularly in Internationalized domain names. See discussion here.