I'm sure most of you are familiar with the Mandatory property available in our form builder. It enables you to ensure that your users enter an input in a required field. If they don't enter an input in that field, they'll be unable to submit the form. All you need to do is select the required field and just enable (check the box) the Mandatory property that you'll find in the Field Properties pane.
Whenever a mandatory field is left empty during form submission, a default alert message will pop up and prevent form submission.
This remains static for all users and doesn't override on any condition. However, there is a way to bypass this and allow a form to be submitted even without the mandatory field value. This tip will help you understand how to make a field mandatory based on a particular condition or criteria.
Let's take the example of an Employee Leave Form, which employees use to apply for leave. Regardless of the number of days employees plan to take off or have already taken, they need to add a record using the Employee Leave Form while applying for leave. While entering the details, they can choose from different leave types available. By default the five basic categories are: Sick Leave, Casual Leave, Compulsory Off, On Duty, and Others. The employees can choose Others if their reason doesn't fall in any of the above choices. However, if the employee selects the Others option and submits the form, the person approving the leave needs to know the reason to either approve or reject it.
If you mark the Leave Type field as mandatory, this wouldn't work if the user chooses the Others option. Hence, we've come up with a workaround—marking a field mandatory based on a condition using Deluge.
Let's go through it step by step.
Step 1: Create the form, with all the required fields
First, let's create a Leave Form to capture all the details. Here, we've used the following fields:
- Name (Name Field)
- Email (Email Field)
- Employee ID (Single Line field)
- Start Date (Date Field)
- End Date (Date field)
- Leave Type (Radio Button)
- Reason (Multi Line Field)
Please note that the Reason field is used to enable employees to enter the reason for their leave if they select the "Others" option in the Leave Type field.
Step 2: Hide the Reason field when the form loads
Whenever the employee selects Others in Leave Type , they need to fill in the reason for it in the Reason field. However, we can hide the field otherwise and show it only when the employee selects Others. To do that, we can create a simple workflow on the "Created or Edited - Load of the Form" condition using the below script.
Step 3: Show the Reason field only when the employee selects the Others option
As mentioned earlier, if the user selects the Others option in the Leave Type field, then the Reason field needs to be shown. For that, create a workflow in "Created or Edited - User input of field" on the Leave Type field using the the below script.
- if(input.Leave_Type == "Others")
- show Reason;
- hide Reason;
Step 4: Mark the required field as mandatory using Deluge
Here comes the important part of configuring the Reason field as mandatory whenever the user selects Others as the leave type. For this, we can use a simple if statement to validate the leave type and prompt them to enter the reason. If the users selects the Others option, they have to enter details in the Reason field as well.
If the Reason field is empty, then we can display an alert asking the user to fill in the reason for their leave. Create a workflow with "Created or Edited - Validation on form submission" and this part of the workflow will get triggered once the user clicks the Submit button of the form.
- if(input.Leave_Type == "Others" && input.Reason == "")
- alert(Reason,"Kindly mention the reason for the leave");
- cancel submit;
Check the below-image to see how the validation works in the live form and the alert gets displayed. On clicking the Submit button, a validation will run to check if the Reason field is left empty. If it is empty, it will prevent form submission and an alert message will be shown in the pop-up.
In order to notify the user which field has to be filled, we're using the Inline Alert. Once the user clicks the OK button in the above error pop-up, an alert with our customized message will be displayed below the respective field, as shown in the image below.
We hope you try out this tip out for when you need to make a field mandatory based on conditions. We'll get back to you soon with another useful tip!