Exploring the Enhanced Capabilities of Glide's Native Form

[Himaladin]

I want to share about the additional capabilities that we can achieve with Glide’s native form. What I have tested with the help of CSS is that native forms can also be applied for validation.

1. Create your validation in the table columns and present it through messages via the “hint” component.
2. Add the visibility conditional and the class “prevent-submit” to these hint components.
3. Add the following CSS code:

/*Container Form*/
#page-root:has(.prevent-submit) [aria-label="Submit"] {
pointer-events: none;
opacity: 0.4;
}

/*Edit Form*/
#overlay-root:has(.prevent-submit) [aria-label="Submit"] {
pointer-events: none;
opacity: 0.4;
}

However, I am still hoping for a conditional “on submit” approach rather than using CSS.

[Robert_Petitto]

Waaaaait…so you’re attaching the prevent-submit class to the hint component and because the hint is present, it makes the submit button inactive?!

That’s amazing

So…requires a business plan, and I agree, that I wish we had a native way of preventing submit, but until then, this is great!

[Himaladin]

Yes

[Robert_Petitto]

I’m so impressed with this solution that I’m going to feature it on my YouTube channel. I’ll link to your post in the description to give you full credit.

[Himaladin]

Thank you! Looking forward to the video. Much appreciated!

[nathanaelb]

This is amazing, Himaladin

[NFNHello]

This is great! Thanks for sharing!

[Robert_Petitto]

agree. Here’s the video breakdown. @Himaladin — let me know if I missed anything:

Hacking a Form Submit Button using CSS

Hey fellow Gliders! I recently came across this post by @Himaladin, and I was so impressed that I had to create a video that walked through this hack step by step—it’s incredibly clever! Using a visibility condition, a custom class, and the :has() CSS pseudo-class, you can control whether or not users can submit a form regardless of required fields! Yes, you’ll need to be on the Business plan in order to use this hack because it requires the use of CSS, but it’s a great way to control …

[Himaladin]

I have watched your video, it’s very good in breaking down the steps to make it clearer. Thank you, Bob. I’m really glad to be able to share.

Additionally, for general knowledge, especially in sensitive cases, this method can still be hacked by users, in other words, the button can be reactivated in the developer tools. Therefore, I still hope that the prevention of the submit button can be provided by Glide.

[Himaladin]

@Robert_Petitto did you know that the form also updates the time? It should now be possible to prevent the form from being submitted within the time limit.

[Dan_San]

Robert, Thanks for this video, this is awesome.

@Himaladin Great find and contribution.

[Himaladin]

Update: Cross-language Form Submit Button Control

If your application uses multiple languages, you can use the selector below:

/* Prevent-Submit for All LANGUAGES */
#page-root:not(:has(.mobile-layer)):has(.prevent-submit)   #overlay-root > div:last-child  button:nth-child(1), 
#page-root:has(.mobile-layer):has(.prevent-submit)   #overlay-root > div:last-child  button:nth-child(2) {
    pointer-events: none;
    opacity: 0.4;
}

[Robert_Petitto]

@Himaladin

Suddenly this week, this CSS doesn’t seem to work. Can you verify?

[Himaladin]

This code still works for me. The major issue is that the devtools have been slowing down increasingly over the past few weeks. Today, it’s even worse, as it freezes under 10 seconds. I can’t inspect the CSS accurately.

[Himaladin]

@Robert_Petitto,

Robert, sorry I was in a hurry to rest last night. What problems did you encounter? What I found was an issue with the language not matching the aria-label. Besides that, the most common issue is errors in writing comment codes. This is the hardest to clarify because the impact of the errors is only partial. So they feel that if other CSS is still working, why isn’t this one?

[Mauro_Ayala]

Very helpful!!! Thanks you so much

[Mauro_Ayala]

Hi @Himaladin I tried the hack, and it worked really well. I encountered the limitation of being able to use it only once, because if I use it on different pages, it hides the button whenever ‘prevent-submit’ is present on any of them. Do you have any ideas on how to limit it to a specific form?

[Himaladin]

Could you explain more about what you mean? Actually, my code won’t work as long as you don’t write the class name “prevent-submit” in the component, and this code also doesn’t hide anything; it only makes it inactive (pointer-events: none;).

[Mauro_Ayala]

Hi @Himaladin , thanks for replying! I’m currently using the class “prevent-sumit” on 2 different screens. If it’s displayed on either of these two, it disables ALL the submit buttons in the app. Is there a way to limit it so that it only disables the “submit” button on the pages or overlays where the “prevent-submit” class is located?

@Himaladin

Could you explain more about what you mean? Actually, my code won’t work as long as you don’t write the class name “prevent-submit” in the component, and this code also doesn’t hide anything; it only makes it inactive (pointer-events: none;).

[Himaladin]

Hi @Mauro_Ayala,
I don’t quite understand the state of the two different screens from you. Are you working with a custom form, or is your second screen an overlay on top of the first screen? Regardless, if you can change the name/label of the button, it will not be affected.