Topic: Is there a way to make server-side validation work with Selects?
Expected behavior
I have a Struts 6 page with a select that I want to use server-side validation with using the is-invalid class. I had to make custom CSS adjustments to make our struts 6 server side validation compatible with Bootstrap. Our product right now does NOT use any client side validation, and we would like to keep it that way. Because of that, the method used by the Select docs, to add data-mdb-validation="true" does not work for us. Hence, I'd like to know if there's a way to make server-side validation work with MDB selects.
Actual behavior
Currently the newly generated Bootstrap select does not transfer any validation related CSS classes to the select it created. Any attempt on my end to make this work through CSS without manipulating the DOM has failed, and I had to use Javascript.
Resources (screenshots, code snippets etc.)
find below a snippet with a Javascript method I currently use to find any is-invalid class on the original select we put on the page and copy it to the Bootstrap select, as well as custom CSS to show invalid-feedback elements that aren't direct siblings of is-invalid components. This last part was needed for alignment, such that form components without errors were not wider than components with errors. This works for me, but I'd like to know whether there's a way to make server-side validation work on selects without Javascript.
https://mdbootstrap.com/snippets/standard/ikan_nak/6228149#html-tab-view
Kamila Pieńkowska staff answered 3 months ago
The data-mdb-validation="true"
is one way to set validation
option to true
.
The other is to set it with JS if select is initiated via JS.
You can do that and use your method to transfer validation class. https://mdbootstrap.com/snippets/standard/kpienkowska/6228986
ikan_nak pro premium priority commented 3 months ago
This still is client-side validation, which I explicitly stated I do not want. I was wondering about server-side validation.
ikan_nak pro premium priority commented 3 months ago
When I say "client-side validation" btw, I'm referencing that enabling validation on a select automatically sets required to true. This means that selects are validated on the client side, while everything else is validated on the server side. That's inconsistent. and not at all what I want.
Grzegorz Bujański staff answered 3 months ago
MDB Select is a very complicated component. You can't style the default select dropdown, so we created an overlay that allows you to style the dropdown. Unfortunately, this comes with some limitations. In this case, applying server-side validation without additional JS code is impossible.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 7.3.0
- Device: Desktop computer
- Browser: Edge
- OS: Windows 11
- Provided sample code: No
- Provided link: Yes
Ruby496Williams commented 3 months ago
Thanks for sharing such great information, I highly appreciate your hard-working skills as the post you published have some great information which is quite beneficial for me, I hope you will post more like that in the future. upsers ups