# ⭕️ 2. Enhance native form: Prevent submission based on emptiness
**URL:** https://community.glideapps.com/t/2-enhance-native-form-prevent-submission-based-on-emptiness/74520
**Category:** Community Resources
**Tags:** custom-css, custom-code
**Created:** [July 1, 2024, 12:24pm UTC](https://community.glideapps.com/t/2-enhance-native-form-prevent-submission-based-on-emptiness/74520 "2024-07-01T12:24:21Z")
**Posts on this page:** 12
**Page:** 1
### Author:  [@Himaladin](https://community.glideapps.com/u/Himaladin)
#### Post date: [July 1, 2024, 12:24pm UTC](https://community.glideapps.com/t/2-enhance-native-form-prevent-submission-based-on-emptiness/74520/1 "2024-07-01T12:24:21Z")
Previously, I posted a topic about: [Exploring the Enhanced Capabilities of Glide’s Native Form](https://community.glideapps.com/t/exploring-the-enhanced-capabilities-of-glides-native-form/69876), to prevent a form from being submitted based on the visibility of the Hint component to control the Submit button (whether it can be pressed or not) through CSS.
This time, I am adding another method: preventing form submission based on whether the form has number-entry or text-entry components that are filled or empty. This method is simpler because it does not require the assistance of the Hint component or others. This prevention concept might be extended to other components which I will add if needed.
I also include code to add the text “Required” to the input field if the component is empty, especially when directing it to a column in the user table.
```auto
/*PREVENT-SUBMIT*/
#page-root:has(.textEntry [data-testid="wf-input"]:empty) [aria-label="Submit"], #page-root:has(.numberEntry label [data-testid="wf-input"][type="number"][value=""]) [aria-label="Submit"] {
pointer-events: none;
opacity: 0.4;
}
```
```auto
/*REQUIRED*/
.textEntry:has([data-testid="wf-input"]:empty) label > div:nth-child(2) > div::before {
content: "Required";
position: absolute;
top: 50%;
padding-left: 15px;
transform: translateY(-50%);
color: darkGray;
opacity: 0.7;
visibility: visible;
z-index:999;
}
.numberEntry label:has([data-testid="wf-input"][type="number"][value=""]):not(:focus-within)::before {
content: "Required";
position: absolute;
top: 50%;
padding-left: 15px;
color: darkGray;
opacity: 0.7;
visibility: visible;
z-index:999;
}
```
Notes:
1. Assign the class name “_ **textEntry** _” or “_ **numberEntry** _” according to the type of component you are using.
2. The code [aria-label=“Submit”], the word “_Submit_” needs to be adjusted for different languages, or you can add more than one selector for various languages using a comma to separate them in your selector.
* * *
## Control Submission Based on On/Off State
For the Switch/Checkbox components, you need to add a container component to apply class names (_ **switch-Comp** _ and _ **check-Box** _). For the switch location, simply assign the class name directly to the component (_ **location-switch** _).
```auto
/*Checkedbox with Container*/
#page-root:has([data-testid="wire-component-stack-check-Box"]):not(:has([data-testid="wire-component-stack-check-Box"] svg)) [aria-label="Submit"] {
pointer-events: none;
opacity: 0.4;
}
/*Switch Component with Container*/
#page-root:has([data-testid="wire-component-stack-switch-Comp"]):not(:has([data-testid="wire-component-stack-switch-Comp"] .peer:checked)) [aria-label="Submit"] {
pointer-events: none;
opacity: 0.4;
}
/*Location-switch*/
#page-root:not(:has(.location-switch .peer:checked)) [aria-label="Submit"] {
pointer-events: none;
opacity: 0.4;
}
```
---
### Author:  [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)
#### Post date: [July 1, 2024, 12:33pm UTC](https://community.glideapps.com/t/2-enhance-native-form-prevent-submission-based-on-emptiness/74520/2 "2024-07-01T12:33:20Z")
Well done! Bookmarked!
---
### Author:  [@Joe\_Gabriele](https://community.glideapps.com/u/Joe_Gabriele)
#### Post date: [July 1, 2024, 12:38pm UTC](https://community.glideapps.com/t/2-enhance-native-form-prevent-submission-based-on-emptiness/74520/3 "2024-07-01T12:38:31Z")
Thanks for this!
I used your Hint CSS on a recent native form but combined it with a hide-submit to completely hide the Cancel/Submit buttons. I also have custom Back/Next buttons that steps through the native form and uses your CSS, to make the Next buttons unclickable until the condition is met.
On the last step I unhide the Submit and use your “prevent-submit”.
I’ll try this out too. Makes the native form look like a custom form.
---
### Author:  [@Himaladin](https://community.glideapps.com/u/Himaladin)
#### Post date: [July 1, 2024, 12:42pm UTC](https://community.glideapps.com/t/2-enhance-native-form-prevent-submission-based-on-emptiness/74520/4 "2024-07-01T12:42:10Z")
I still have one more method and it’s after dinner. 🙏
---
### Author:  [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)
#### Post date: [July 15, 2024, 2:28am UTC](https://community.glideapps.com/t/2-enhance-native-form-prevent-submission-based-on-emptiness/74520/5 "2024-07-15T02:28:49Z")
@Himaladin — Here’s a challenge for you:
Sometimes, in a native form, a choice component ends up being filtered such that no choices meet the filter criteria and thus hides the choice component. However, the choice component is required, so we want to prevent the choice component from hiding. Thoughts?
---
### Author:  [@Himaladin](https://community.glideapps.com/u/Himaladin)
#### Post date: [July 15, 2024, 4:43am UTC](https://community.glideapps.com/t/2-enhance-native-form-prevent-submission-based-on-emptiness/74520/6 "2024-07-15T04:43:43Z")
If I understand you correctly, it seems that the component also does not leave a trace in the devtools. Are you suggesting displaying it with another component? Perhaps a method like this can be used: [In-app filter message for no matching results](https://community.glideapps.com/t/in-app-filter-message-for-no-matching-results/74679/7)? In other words, if this choice component is not found `(:not(:has(thisComponent)))`, then another choice component appears. However, can’t this be done without CSS?
---
### Author:  [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)
#### Post date: [July 15, 2024, 3:47pm UTC](https://community.glideapps.com/t/2-enhance-native-form-prevent-submission-based-on-emptiness/74520/7 "2024-07-15T15:47:43Z")
I ended up building a pseudo custom form using temporary Fields user profile table.
---
### Author:  [@alexpress](https://community.glideapps.com/u/alexpress)
#### Post date: [July 15, 2024, 4:36pm UTC](https://community.glideapps.com/t/2-enhance-native-form-prevent-submission-based-on-emptiness/74520/8 "2024-07-15T16:36:03Z")
Hey thats really interesting! So filters only without CSS?
Any chance for a short video/demo 🙏
---
### Author:  [@Himaladin](https://community.glideapps.com/u/Himaladin)
#### Post date: [July 16, 2024, 3:15am UTC](https://community.glideapps.com/t/2-enhance-native-form-prevent-submission-based-on-emptiness/74520/9 "2024-07-16T03:15:25Z")
Yes, maybe a combination with the user table will work. Unfortunately I don’t have a case example of this to study.
---
### Author:  [@Himaladin](https://community.glideapps.com/u/Himaladin)
#### Post date: [July 26, 2024, 8:31am UTC](https://community.glideapps.com/t/2-enhance-native-form-prevent-submission-based-on-emptiness/74520/10 "2024-07-26T08:31:56Z")
Today’s update adds switch and location components based on on-off states to prevent submission.
---
### Author:  [@vras\_dinand](https://community.glideapps.com/u/vras_dinand)
#### Post date: [August 3, 2024, 10:01am UTC](https://community.glideapps.com/t/2-enhance-native-form-prevent-submission-based-on-emptiness/74520/11 "2024-08-03T10:01:39Z")
how to border for choice component?OR Date Component? before click active or data is empty
---
### Author:  [@Himaladin](https://community.glideapps.com/u/Himaladin)
#### Post date: [August 3, 2024, 10:07am UTC](https://community.glideapps.com/t/2-enhance-native-form-prevent-submission-based-on-emptiness/74520/12 "2024-08-03T10:07:47Z")
If you are asking about CSS styling issues rather than a prevent-submission issue, please create a new topic; someone might be able to help you. Meanwhile, I am currently having problems with my computer and cannot answer you at the moment.