# ⛔️ 3. Enhance Native Form: Prevent Submit and Display Dynamic Messages **URL:** \ **Category:** Community Resources\ **Tags:** custom-css, tutorial, custom-code\ **Created:** [July 1, 2024, 1:41pm UTC](https://community.glideapps.com/t/3-enhance-native-form-prevent-submit-and-display-dynamic-messages/74521 "2024-07-01T13:41:10Z")\ **Posts on this page:** 14\ **Page:** 1
**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\ **Post date:** [July 1, 2024, 1:41pm UTC](https://community.glideapps.com/t/3-enhance-native-form-prevent-submit-and-display-dynamic-messages/74521/1 "2024-07-01T13:41:10Z")
Two previous topics: [Exploring the Enhanced Capabilities of Glide’s Native Form](https://community.glideapps.com/t/exploring-the-enhanced-capabilities-of-glides-native-form/69876) and “[Enhance Native Form: Prevent Submission Based on Emptiness](https://community.glideapps.com/t/2-enhance-native-form-prevent-submission-based-on-emptiness/74520),” 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. ![ScreenRecording2024-07-01at00.56.20-ezgif.com-video-to-webp-converter](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/3/6319cce0375f244fa0bd741111eaad5ba1266bad.webp) ```auto /*Validation Message and prevent submit*/ #page-root:has(#disable-submit) [aria-label="Submit"] { pointer-events: none; opacity: 0.4; } ``` ![Screenshot 2024-07-01 at 00.54.04](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/5/f55b1b4d086773da3c92cbc7c8e6ab88cb5e7130.jpeg) ```auto /*STAGE 1 - with ID*/
``` ```auto /*STAGE 2 - with ID*/
ERROR MESSAGE❗️
``` ```auto /*STAGE 3 - without ID*/
Success Message
``` **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. ---
**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\ **Post date:** [July 1, 2024, 2:18pm UTC](https://community.glideapps.com/t/3-enhance-native-form-prevent-submit-and-display-dynamic-messages/74521/2 "2024-07-01T14:18:41Z")
@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. ---
**Author:** ![Kemal1973](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/kemal1973/32/72721_2.png) [@Kemal1973](https://community.glideapps.com/u/Kemal1973)\ **Post date:** [July 2, 2024, 11:40am UTC](https://community.glideapps.com/t/3-enhance-native-form-prevent-submit-and-display-dynamic-messages/74521/3 "2024-07-02T11:40:52Z")
Am I right way for my case? [aria-label=“Submit”,“Ibraz etmek”,“ارسال”] ---
**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\ **Post date:** [July 2, 2024, 11:45am UTC](https://community.glideapps.com/t/3-enhance-native-form-prevent-submit-and-display-dynamic-messages/74521/4 "2024-07-02T11:45:04Z")
> [@Kemal1973](#): > > Am I right way for my case? > [aria-label=“Submit”,“Ibraz etmek”,“ارسال”] ```auto #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; } ``` ---
**Author:** ![Kemal1973](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/kemal1973/32/72721_2.png) [@Kemal1973](https://community.glideapps.com/u/Kemal1973)\ **Post date:** [July 2, 2024, 11:53am UTC](https://community.glideapps.com/t/3-enhance-native-form-prevent-submit-and-display-dynamic-messages/74521/5 "2024-07-02T11:53:59Z")
**CSS class** wıll be disable-submit ? ---
**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\ **Post date:** [July 2, 2024, 11:57am UTC](https://community.glideapps.com/t/3-enhance-native-form-prevent-submit-and-display-dynamic-messages/74521/6 "2024-07-02T11:57:01Z")
The class name is arbitrary. ---
**Author:** ![Kemal1973](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/kemal1973/32/72721_2.png) [@Kemal1973](https://community.glideapps.com/u/Kemal1973)\ **Post date:** [July 2, 2024, 12:07pm UTC](https://community.glideapps.com/t/3-enhance-native-form-prevent-submit-and-display-dynamic-messages/74521/7 "2024-07-02T12:07:10Z")
I cahanged it but it doesn’t work ![css](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/1/119827844776ef5040e7cf8c641cbe62c195cadc.png) ---
**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\ **Post date:** [July 2, 2024, 12:31pm UTC](https://community.glideapps.com/t/3-enhance-native-form-prevent-submit-and-display-dynamic-messages/74521/8 "2024-07-02T12:31:37Z")
~~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). ---
**Author:** ![Kemal1973](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/kemal1973/32/72721_2.png) [@Kemal1973](https://community.glideapps.com/u/Kemal1973)\ **Post date:** [July 2, 2024, 12:52pm UTC](https://community.glideapps.com/t/3-enhance-native-form-prevent-submit-and-display-dynamic-messages/74521/9 "2024-07-02T12:52:11Z")
I changed my class name to **disable-submit** but it doesn’t work ---
**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\ **Post date:** [July 2, 2024, 12:55pm UTC](https://community.glideapps.com/t/3-enhance-native-form-prevent-submit-and-display-dynamic-messages/74521/10 "2024-07-02T12:55:17Z")
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. ---
**Author:** ![Kemal1973](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/kemal1973/32/72721_2.png) [@Kemal1973](https://community.glideapps.com/u/Kemal1973)\ **Post date:** [July 2, 2024, 12:56pm UTC](https://community.glideapps.com/t/3-enhance-native-form-prevent-submit-and-display-dynamic-messages/74521/11 "2024-07-02T12:56:38Z")
I use Hint I chenged # to dot and class name to disable-submit Turkish is ok but english is not ---
**Author:** ![Kemal1973](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/kemal1973/32/72721_2.png) [@Kemal1973](https://community.glideapps.com/u/Kemal1973)\ **Post date:** [July 2, 2024, 1:09pm UTC](https://community.glideapps.com/t/3-enhance-native-form-prevent-submit-and-display-dynamic-messages/74521/12 "2024-07-02T13:09:06Z")
![css class](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/b/eb6e8d97939f2ac5658030d0d150565ee4b3429a.png) ![css-2](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/7/a7a7779c7134efe1d32bd2ca6b93f096bb3c6768.png) ---
**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\ **Post date:** [July 2, 2024, 1:14pm UTC](https://community.glideapps.com/t/3-enhance-native-form-prevent-submit-and-display-dynamic-messages/74521/13 "2024-07-02T13:14:38Z")
As long as your current button name is the same as your code, it should work. ---
**Author:** ![Kemal1973](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/kemal1973/32/72721_2.png) [@Kemal1973](https://community.glideapps.com/u/Kemal1973)\ **Post date:** [July 2, 2024, 1:21pm UTC](https://community.glideapps.com/t/3-enhance-native-form-prevent-submit-and-display-dynamic-messages/74521/14 "2024-07-02T13:21:31Z")
Thank you so much everything is correct but English(Submit) doesn’t work in my mobile device I will try to recheck again 👃 👃