Previously, I posted a topic about: Exploring the Enhanced Capabilities of Glide’s Native Form, 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.
/*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;
}
/*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:
- Assign the class name “textEntry” or “numberEntry” according to the type of component you are using.
- 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).
/*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;
}
