Topic: Server-side Validation on select fields
dhermann premium asked 2 years ago
What are the classes to apply when server-side validation fails for a select input? Is invalid feedback available?
https://mdbootstrap.com/snippets/standard/dhermann/3952476
Thanks,
Dan
Closed
This topic is closed.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Closed
Specification of the issue
- ForumUser: Premium
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 4.0.0
- Device: Desktop
- Browser: Safari
- OS: macOS Monterrey 12.0.1
- Provided sample code: No
- Provided link: Yes
Grzegorz Bujański staff commented 2 years ago
Here is an example of how to set the validation status to not valid: https://mdbootstrap.com/snippets/standard/grzegorz-bujanski/3957970#js-tab-view
dhermann premium commented 2 years ago
Thanks Grzegorz, but this snippet uses the client-side validation. What classes can I apply to my select elements when it fails server-side validation? Is there no way?
Grzegorz Bujański staff commented 2 years ago
For this to work properly and return invalid feedback, you need to do exactly the same as in the snippet I sent - add the class
was-validated
to the form and mark select input as invaliddocument.querySelector('.select-input').setCustomValidity('invalid');
dhermann premium commented 2 years ago
The
was-validated
class puts a green outline around my other form elements, even ones marked asis-invalid
.Running inline JavaScript on document load is not a good solution. The MDB select element should take a class or other attribute as a parameter and render it in the invalid state. I am surprised the MDB team would accept this as viable.
Are there plans to fix this in a future release?
Grzegorz Bujański staff commented 2 years ago
Yes. We strive to improve our components. We will also improve the selecta validation on the server side in a feature release. For now, I can suggest a workaround for this: https://mdbootstrap.com/snippets/standard/grzegorz-bujanski/3973897#css-tab-view