⛔️ 3. Enhance Native Form: Prevent Submit and Display Dynamic Messages

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">
/*STAGE 2 - with ID*/
<div style="margin-top:-15px;text-align: right; font-size: 12px;color:red;" id="disable-submit">
/*STAGE 3 - without ID*/
<div style="margin-top:-15px;text-align: right; font-size: 12px;color:limegreen;">
Success Message

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.


@Robert_Petitto, this issue has been on my mind for a while based on comments from your YouTube channel followers, and today I finally figured out how to solve it. Perhaps you could create a compilation example of several methods in their specific use cases with more practical details and thorough explanations.

1 Like

Am I right way for my case?
[aria-label=“Submit”,“Ibraz etmek”,“ارسال”]

#page-root:has(#disable-submit) [aria-label="Submit"], #page-root:has(#disable-submit) [aria-label="Ibraz etmek"], #page-root:has(#disable-submit) [aria-label="ارسال"] {
    pointer-events: none;
    opacity: 0.4;

CSS class wıll be disable-submit ?

The class name is arbitrary.

I cahanged it but it doesn’t work

Your settings are correct. Make sure your class name is the same between your component and your CSS code.

Sorry, if you are using a class you need to use a dot, not a hashtag (for an ID).

I changed my class name to disable-submit but it doesn’t work

Which method do you use? If you use the hint component then you must use the class name. Change hashtags to dots.
If you use the method above, I deliberately differentiate it by using ID.

1 Like

I use Hint
I chenged # to dot and class name to disable-submit
Turkish is ok but english is not

As long as your current button name is the same as your code, it should work.

Thank you so much
everything is correct but English(Submit) doesn’t work in my mobile device
I will try to recheck again :nose: :nose: