Topic: Hidden fields break in collapsed containers

ilya premium asked 3 months ago

Consider this snippet:

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

Kamila Pieńkowska staff answered 3 months ago

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:

Please insert min. 20 characters.


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



Specification of the issue

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