Topic: Hidden fields break in collapsed containers

ilya premium asked 3 months ago


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


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: https://mdbootstrap.com/docs/standard/components/stepper/#section-add-custom-validation-example



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