You can set rules for an element, to make sure you capture the form data in the format you expect: is this a mandatory field? should we check the content of the field before validating it?
Required option
It is possible to set up mandatory fields in your form widgets. Thus, if the information has not been filled in by the visitor, the field will be considered as invalid when the user will try to submit the form if the event specifying where you send your form data (via HTTP Request action) has already been defined.
In practice, if this is the case, it means two things:
1. The design of your element will switch to the one you have defined for the invalid state.
2. If you have added a FormErrorMessage element to your form, this element will become visible. {link}.
All element types belonging to the Form category can be made mandatory. If it is a toggle, it means that the visitor must necessarily switch it to the ON position. For a checkbox, it means that the user needs to check it. For an input field, it means that the user can’t leave it empty.
Use case
In our use case, we want to make all elements mandatory: the email address input, the two dropdowns for selecting a newsletter category, as well as the toggle for accepting the Terms & Conditions.
We select each of these elements and switch the Required toggle to the ON position.
Validation rules
Validation rules triggered on form submission
Note: In all that follows, we assume the following prerequisite: an event defining what happens when the submit button is clicked has been created, and that the associated action sends an HTTP Request.
You can set validation rules in order to check that the fields are valid before form submission. This only concerns elements of type Input and Textarea.
For example, if a text input contains information in the wrong format, the form cannot be sent and a an error message can be set up to ask the visitor to correct his input.
You can set one of these options:
- not empty
- only alphanumeric
- number
- URL
- Text
- length, to specify whether you expect the user to write a text with a minimum or maximum number of characters
- Regular expression, if you need to cumulate several rules
By default, this validation will only take place when the form is attempted to be submitted, i.e. when the visitor clicks on the submit button.
You can however create an Event to trigger a check of the field when the visitor leaves it, i.e. when the visitor stops writing in it. We will see this case in the part just below.
FormErrorMessage
The element of type FormErrorMessage is used to display a single message when an error has been reported during the validation of the form, regardless of the field where the error is located.
If you want to display a specific error message on an element of your form, to indicate to the visitor exactly where the erroneous information is, you must use an element of type Text and associate it with an event.
Addition of events to check the validity of your fields when losing focus
You can set validation rules in order to check that the fields are valid when losing focus. This only concerns elements of type Input and Textarea.
For example, if a text input contains information in the wrong format, an error message can be set up to ask the visitor to correct his input.
First, in the parameters of the input element you have created, select a Validation rule from the list.
You can set one of these options:
- not empty
- only alphanumeric
- number
- URL
- Text
- length, to specify whether you expect the user to write a text with a minimum or maximum number of characters
- Regular expression, if you need to cumulate several rules
Note: You can also set up the Validation rule directly when creating the event.
Then, add a Text element containing the error message, place it next to the relevant input field, and hide it so that it only appears when the value in the input has the wrong format and the event is triggered.
Next you will have to create an Event to trigger a check of a field when the visitor leaves it. Go to the Events part of the Widget Studio.
Add a Form event , click on By element form value and select your form field element.
In the dropdown below, you can choose between:
- Matching validation rule
- Doesn’t match validation rule
- One of the Validation rules that you can also find in the editing part of the Widget Studio, when you directly modify an element: Not empty; Only alphanumeric; Number; Email; URL; Text; Length; Regular expression
You can either choose Matching/Doesn’t match if you have already created the rule on the element, or create it here. If you set the rule in this dropdown, then it corresponds to the Matching logic: for example, if you choose Only alphanumeric, it means that the value entered in your field MUST be alphanumeric to be validated.
Then add an Elements action, select Show element and select your text element.
When losing focus, the value of the element will be checked, and if it does not match your Validation rule, then the message will appear in the widget.
Note: You can also add a specific event to make sure that the error message does not appear in your widget by default, but only when an error is detected when losing focus.
Use case
In the text input, we want to make sure that the information retrieved is an email address, in the right format.
For this, in Validation rule we choose the option Email.
If the information entered by the visitor does not have the email address format, the form cannot be validated.
We add a FormErrorMessage in case an error is detected while submitting the form. This error can stem from any field of the form, such as a mistake in the email field (if the user did not indicate a valid email). In this situation, FormErrorMessage will appear.
