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.