How to validate an input against a list of approved values
Other use-cases using Memberscript #127
https://docs.google.com/document/d/1AXazZfgQ2SJ0H0UHQKI9zZuTbbd7y0-9swKRjXIu4hQ/edit?tab=t.0
Memberscripts needed
https://www.memberstack.com/scripts/validate-text-inputs
Tutorial
Cloneable
Why/Use Cases
- Ensure users input data that is appropriate for a specific form field and communicate errors as they type.
Validating users’ field inputs on a Webflow site
Form fields are usually expected to receive a certain type of data input (e.g. ZIP code), but users can sometimes get it wrong, often by accident (e.g. typos).
Validating form inputs will immediately inform users if the data they’ve entered is wrong or unexpected and this guide will show you how to validate a field input against a list of approved values.
This works by first providing a list of acceptable inputs or patterns and then comparing users’ inputs against with list to ensure it matches.
To create a form field with validation on your Webflow site, we’re going to use MemberScript #127 – Validate Text Inputs. Follow the link to get the code you’ll need to add to your page and watch a video tutorial on how to set everything up.
Setting it up
First off, you’ll need to build and style your form and add the following attributes to the field you want to have validation on:
· ms-code-require=”zip” – we’re only using “zip” for the purpose of this guide, but it’s just an identifier that you can name however works best for your input type
· ms-code-require-list=”VALUE” – possible values discussed below
· maxlength=”5” – this will simply limit the number of characters the input can have
For the list of acceptable values, simply enter a comma-separated list of values (e.g. 10000,10001,10002, etc.) or use certain variables to tell the field what type of inputs it should accept.
Variables are described like this: {a0A}. In this example, an acceptable input is 3 characters long, with the first character being a lowercase letter, the second a number, and the third an uppercase letter. Some examples of acceptable inputs are: v8Q, w4Z, r9D, etc.
These can be used in various ways, for example:
· 100{00} – any five-digit number that starts with 100; the last two digits can be anything
· abc{aA} – any five-letter word that starts with abc and ends with a lowercase letter followed by an uppercase letter
· 0000} – any four-digit number
· aaaaa} – any lowercase five-letter word
Next, create and style an error message (can be a simple div block) for unacceptable inputs below the field and add the following attribute to it:
· ms-code-require-error=”zip”
Optionally, you can also add this attribute to the submit button:
· ms-code-submit-button=”zip”
This lowers the submit button’s opacity to 50% until the ZIP field receives an acceptable input, while also making the button unclickable.
Making it work
Now that you’ve got everything set up in Webflow, all you need to do is add the MemberScript #127 custom code to your page, before the closing body tag.
Conclusion
That’s all you need to do, you can now test the form fields on your live site.
If you want to use our demo project to get you started, just click the button below to add it to your Webflow site.
Our demo can help you validate your users’ form inputs against a custom list of values on your Webflow site.
Take me to Cloneable!
Written by
Ovidiu
Contributor