Email Validation Tests
HTML5 offers email address validation baked-in, however it has some limitations. In this demo we will test it, and compare it to results given by a stronger pattern-based approach.
- TEST 1
- > This is the default validation performed by browsers when you identify a form fields as type="email".
- > In Webflow, this is what you get when you identify the form field as Email type.
- > + Very easy to configure
- > - Limited usefulness, as it allows many email addresses we would not normally consider valid, such as foo@bar
- TEST 2
- > Uses a custom pattern-based validation with a custom regular expression.
- > Can be added through the Webflow designer using a custom field.
- > + Excellent validation
- > + No script needed.
- > + Part of the HTML5 standard.
- > + Webflow (currently) does not have the required custom attributes marked as reserved.
Try it out.
Enter an email address, and click Test Validation. The browser will validate your input, and if it is considered invalid, an error will appear.
A success alert will appear if all fields pass.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Non-Business Email Validation Tests
This regex not working in current pattern approach
From
https://www.tiny-resources.com/elements/email-validation
https://stackoverflow.com/questions/45258726/using-negative-lookbehind-and-lookahead-in-html5-pattern
HTML5 offers email address validation baked-in, however it has some limitations. In this demo we will test it, and compare it to results given by a stronger pattern-based approach.
https://www.w3schools.com/tags/att_input_pattern.asp
- TEST 1
- > This is the default validation performed by browsers when you identify a form fields as type="email".
- > In Webflow, this is what you get when you identify the form field as Email type.
- > + Very easy to configure
- > - Limited usefulness, as it allows many email addresses we would not normally consider valid, such as foo@bar
- TEST 2
- > Uses a custom pattern-based validation with a custom regular expression.
- > Can be added through the Webflow designer using a custom field.
- > + Excellent validation
- > + No script needed.
- > + Part of the HTML5 standard.
- > + Webflow (currently) does not have the required custom attributes marked as reserved.
Try it out.
Enter an email address, and click Test Validation. The browser will validate your input, and if it is considered invalid, an error will appear.
A success alert will appear if all fields pass.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
How to implement
See the designer view of this demonstration by clicking the button at the top.
Then view this part of the layout for details;
01 Setting up advanced email validation
- Select the email field you want to validate
- Add a custom attribute;
- > name = pattern
- > value = (?:[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])+)\])
- Optionally, make the field required.
02 Key points
- In HTML5, INPUT elements can have a pattern attribute which specifies a regular expression. That expression must be matched for the field content to be considered valid.
- A field which is blank will be considered valid, if it is not marked as required.
- The regex string must be a javascript regex string
- There are several regex approaches depending on your needs
- > General Email Regex (RFC 5322 Official Standard)
- > Others
- The string must be encoded for use in an HTML attribute before it can be pasted into the Webflow designer. Webflow does not encode the custom value for you.