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.
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:
Add Conditional Logic
Conditional logic is used to compare Field A with Field B. To add conditional logic to your form:
- Click the Conditional Logic icon at the top of the layout editor. The Conditional Logic sidebar will open.
- Click the Add icon to add a new row.
- 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:
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:
- Invalidate the field by setting the invalid feedback message on field B. We’ll set the message to say Fields do not match.
- Show the invalid feedback on field B.
When the fields do match, we’ll do the following:
- Remove the invalid feedback message on the field B.
- 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:
The completed conditional logic looks as follows:
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.