Confirmation FieldsPRO

Confirmation fields require users to verify an email address, password, or other text information that has been typed into a form. You can add as many confirmation fields as you need on your form using some simple conditional logic.

The tutorial below shows how to build a confirmation field.

Demo

Download Demo

Add Fields

First add two text based fields to you form. Fields you can use include:

Tip: The Section Library has a password confirmation fields ready to use.

Simply add the two fields to your form using any layout you wish:

WS Form - Confirmation Fields - Add Fields

Add Conditional Logic

Conditional logic is used to compare Field A with Field B. To add conditional logic to your form:

  1. Click the Conditional Logic icon at the top of the layout editor. The Conditional Logic sidebar will open.
  2. Click the Add icon to add a new row.
  3. Enter a label for the row, for example: Compare Fields.

The IF Statement

To compare Field A with Field B, you add the following for the IF statement:

WS Form - Confirmation Fields - Conditional Logic - IF

The IF statement will be true if Field A and Field B do not match.

Below this you will then add the THEN and ELSE statements.

The THEN and ELSE Statements

In this example we’re going to do two things if the fields do not match:

  1. Invalidate the field by setting the invalid feedback message on field B. We’ll set the message to say Fields do not match.
  2. Show the invalid feedback on field B.

When the fields do match, we’ll do the following:

  1. Remove the invalid feedback message on the field B.
  2. Hide the invalid feedback on field B.

Invalid feedback on a fields is usually only shown on the form when the form is submitted. We can force a field to be invalid by using the Set custom validity method on a field and by adding a class of wsf-validated to the field wrapper.

The resulting THEN and ELSE statements in your conditional logic will therefore look as follows:

WS Form - Confirmation Fields - Conditional Logic - THEN, ELSE

The completed conditional logic looks as follows:

WS Form - Confirmation Fields - Conditional Logic - Full Logic

You can use this same method to do anything else you wish when two fields do not match, for example instead of showing invalid feedback you should show a message field.

An advantage of using the method above is that it will invalidate fields so that other form functionality reliant on field validation will work correctly such as tab validation.