Form Validation

By default, form validation occurs when a Submit button is clicked (or Add To Cart if you are using the WooCommerce add-on).

WS Form also provides extensive options for managing form validation as described below.

Tab Validation

Tab validation prevents users from progressing to the next tab unless the current tab is validated.

To enable this feature:

1. Click the Form Settings icon at the top of the layout editor.
2. Scroll down to the Tabs section.
3. Check the Tab Validation setting.
4. Click Save.

Tab Validation – Show Invalid Fields

Tab validation can also be configured to show invalid fields when a Next Tab button is clicked. If invalid fields are found the user will be shown invalid feedback and the form will not progress to the next tab.

To enable this feature:

1. Click the Form Settings icon at the top of the layout editor.
2. Scroll down to the Tabs section.
3. Check the Show Invalid Fields setting.
4. Click Save.

Inline Validation

Inline validation allows you to immediately show invalid feedback on a field if it is invalid. WS Form does this by adding the following class at a section or field level:

wsf-validated

While you can add this class yourself (e.g. with class settings or conditional logic) WS Form also has settings for enabling this.

Inline Validation – Fields

1. Click the field settings  icon.
2. Click the Advanced tab.
3. Change the Inline Validation setting under Validation. Choose Always to always show invalid feedback when a field is invalidated. Choose On Field Change or Blur to show invalid feedback when a field is changed or blurred (loses focus).
4. Click Save.

Inline Validation – Sections

You can enable inline validation of all fields in a section as follows:

1. Click the section settings  icon.
2. Click the Advanced tab.
3. Change the Inline Validation setting under Validation. Choose Always to always show invalid feedback when a field within the section is invalidated. Choose On Field Change or Blur to show invalid feedback when a field within the section is changed or blurred (loses focus).
4. Click Save.

Check Validation with Conditional Logic

You can add conditional logic IF conditions based upon whether a form, tab, section or field is validated. To do this:

1. Click the Conditional Logic icon at the top of the layout editor. The Conditional Logic sidebar will open.
2. Click the add + icon.
3. In the IF condition, select Form or a tab, section or field.
4. Select Validated or Not Validated.
5. Complete your THEN and/or ELSE statements.
6. Click Save

Changing Invalid Feedback Text

When a form is validated, any fields that do not validate will show invalid feedback text below that field. You can change the invalid feedback text that is shown as follows:

1. Click the settings icon on the form field.
2. Click the Basic tab in the sidebar.
3. Scroll down to the Validation section.
4. Enter text into the Invalid Feedback Text setting.
5. Click Save.