Use the Refokus Form Validator to create ‘valid’ and ‘non-valid’ states when a user enters information into a form field. This supports Names, Email Addresses and Phone Numbers.
Add the Custom Attribute on the ‘Form’ element that Webflow creates in the native form component.
To start, we must build our form element in our Webflow project. For this, we must have one or more fields, obviously. The first thing we are going to do is create a class to use on all the different form field instances, and create combo classes for the different states. These will be the [.c-tool_tag]‘Valid State’[.c-tool_tag] and the [.c-tool_tag]‘Error State.’[.c-tool_tag] We will use the combo class for the Valid State as ‘cc-valid’ and for the Error State we will use the combo class ‘cc-error’. You can style these fields however you want.
(Note: You will want to temporarily remove the combo classes, but not delete them, entirely)
If you want error messages to appear, you need to add an element right next to the form element with the [.c-tool_tag]c-error-message[.c-tool_tag] class. Create a notice, like the example below in our demo. It is important to place this element below the ‘field element’ in the navigator. You will need to set this element to display: none, and add this element inside every ‘form field’ you need validated.