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 _foo@bar is actually a valid email address on internal networks... even though today, on the public Internet, you'd never see an address like that.

So how do we prevent that?

In addition to setting the field type to email, we'll add a _pattern attribute to further specify what we consider as valid input.

In Webflow, you do this by selecting the input field and then adding a custom attribute. Here we'll use;

_pattern =

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

If you have problems with this on any browsers, you can try an even looser match for your pattern;

_pattern =

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

IMPORTANT CHANGE
I've updated this recommended pattern due to a Chrome bug that was spotted in the Webflow forum- thanks Carl! Here are some details of the bug.

The original pattern below, which is much more precise and complete, no longer appears to work properly in Chrome.

_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.