Exploring the Enhanced Capabilities of Glide's Native Form

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.

9 Likes

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 :clap: :clap: :clap:

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!

2 Likes

Yes

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.

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

This is amazing, Himaladin :star2:

1 Like

This is great! Thanks for sharing!

1 Like

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

2 Likes

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.

@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.