Topic: Hidden fields break in collapsed containers
Consider this snippet:
https://mdbootstrap.com/snippets/standard/ilya/6061482
There is a collapsed form with a required field. If you try to submit it, there is an error in the browser console:
An invalid form control with name='' is not focusable. <input type="text" id="firstNameInput" class="form-control" required>
The user does not see the error.
How can we handle it? We usually collapse parts of forms in our interfaces. Users should be able to see that there is an error in the hidden part.
Thanks, Ilya
You may either catch errors from your form and show segments that have errors (you would need to use collapse that allow expanding multiple sections), write custom validation that will test inputs along the way and that won't allow collapsing input with invalid value or consider using stepper with validation at every step: https://mdbootstrap.com/docs/standard/components/stepper/#section-add-custom-validation-example
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 6.4.2
- Device: any
- Browser: any
- OS: any
- Provided sample code: No
- Provided link: Yes