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. Check the ‘Inline Validation’ setting under ‘Validation’.
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. Check the ‘Inline Validation’ setting under ‘Validation’.
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’.