Two previous topics: Exploring the Enhanced Capabilities of Glide’s Native Form and “Enhance Native Form: Prevent Submission Based on Emptiness,” which I have published, each have different purposes and functions. For those using these methods, it is advisable to carefully choose the best one for your specific case.
Regarding This Method: To compute so that your form can display computed results and dynamic messages, you will need assistance from a user table as a temporary placeholder that can update all your complex calculations in real time, similar to what you find when using a custom form.
The main approach here is using an ID ("id=“disable-submit”) in the HTML code. Therefore, you need a richtext component to display dynamic messages based on the backend calculations. As long as this ID appears, the submit prevention action can be enforced. I provide an example HTML code in three stages: an empty state with "id=“disable-submit”, a prevention state also with "id=“disable-submit”, and a state without the ID. Of course, you can create more variations of this code as needed, such as using more than one ID to control other components under various conditions.
Please note that in a single form, you must have at least one component that is not from the user table. In other words, if all your input components are in the user table columns, the form submit button will always be grayed out (considered not created/formed).
Finally, this answers/enhances the native form’s capability as it should have been made.
/*Validation Message and prevent submit*/
#page-root:has(#disable-submit) [aria-label="Submit"] {
pointer-events: none;
opacity: 0.4;
}
/*STAGE 1 - with ID*/
<div id="disable-submit">
</div>
/*STAGE 2 - with ID*/
<div style="margin-top:-15px;text-align: right; font-size: 12px;color:red;" id="disable-submit">
ERROR MESSAGE❗️
</div>
/*STAGE 3 - without ID*/
<div style="margin-top:-15px;text-align: right; font-size: 12px;color:limegreen;">
Success Message
</div>
Note:
The code [aria-label="Submit"], with the word “Submit,” needs to be adjusted for different languages or you can add more than one selector for various languages by using a comma separator in your selector.
