The Disable DOM elements functionality allows you to prevent users from clicking an element that progresses them to the next step until a certain Validation has been satisfied. For example, until a box is checked, a phone number with digits is typed, your email address contains @, etc., the submit button of a web form is disabled.
The disabled elements serve as OBSERVERS to check whether a particular validation has been met, and they only become functional once that validation has been met. This ensures a higher process completion and compliance rate, improves decision-making, and decreases errors while validating an event.
In this article, we will learn how to disable the Save button until the Mobile field is validated in Salesforce.
Use the following steps to disable your DOM elements while creating Validations.
1. Login to your Apty Studio.
2. Select your application and then click Validations.
3. Click Create New Frame.
Note:
The Validations screen will prompt you to create a new Frame, unless it was created earlier. If the required Frame for this page was created earlier, select it from the list. Learn how to create a Frame.
4. Click Create New Validation.
5. Click Select Spotlight and then select the Mobile field as the spotlight event.
6. Click Validator and then select Required field from the dropdown.
Note:
You can select any validator from the options in the dropdown to validate a particular event.
7. Scroll down to the OBSERVERS section and then check the Disable DOM Elements box.
8. Click + Add new element Set from the dropdown.
Info:
- Set is a group of elements you want to disable for one or more events. You can either create a new element Set or use a pre-existing Set if available. This means that you can use a single Set for multiple events within the same Frame.
9. Enter the name of your Set.
10. Click the + icon to select and disable your DOM elements.
11. Click the Save button.
12. Click Save in the Apty Studio.
Note:
- To add more elements to your set, click the plus icon and then select more events on your application page.
- You can view which events are selected by hovering your cursor over the element Set.