Topic: Is there a way to make server-side validation work with Selects?

ikan_nak priority asked 3 months ago


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


Ruby496Williams free 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


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.


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



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Priority
  • 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