Topic: Stepper validation - Select elements are not highlighted when invalid

softcon premium asked 7 months ago


Expected behavior

When using a stepper, on validating a multi-paged form, before proceeding to the next page any "required" elements that have not been selected will correctly prevent the form from progressing, however it should mark ALL the invalid elements in red.

Actual behavior

It marks most of the main elements in red (text,textfield,checkbox etc), but not the mdb Select element. Specifically when using a "hidden" option value as the default selected item.

The page https://mdbootstrap.com/docs/standard/forms/validation/ shows examples but doesn't show any working examples of the Select element. So perhaps this error is already known?

Resources (screenshots, code snippets etc.)

Try using a stepper form with validation with this Select element:

 <select  class="select" label="test" required>
   <option value="" hidden>Please select something</option>   
   <option value="1">Option 1</option>
   <option value="2">Option 2</option>
   <option value="3">Option 3</option>
 </select>

softcon premium commented 7 months ago

Looking at this again, the example page actually mentions that this only "applies to textarea and input elements". MDB Select is technically an input mimicking the hidden select file so I assumed that would have worked. I have managed to fix the issue myself but it's very hacky. It involved wrapping the select element in a div with a specific classname, and calling the stepper function to cycle through all div elements with that classname prior to moving to the next step. It checks any select element within that div, checks whether it is "required" - if required but not filled it applies the ".is-invalid" class to the "select-input" found within that div.


Michał Duszak staff commented 7 months ago

Here's another example of how it could be acquired https://mdbootstrap.com/snippets/standard/m-duszak/3881266#html-tab-view


softcon premium commented 7 months ago

Thanks. I don't think that works if the form is within a stepper though. It only works at the point of submitting the form.


Michał Duszak staff commented 7 months ago

Like this? https://mdbootstrap.com/snippets/standard/m-duszak/3893216



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Opened

Specification of the issue

  • User: Premium
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 3.11.0
  • Device: PC
  • Browser: chrome, Edge, Firefox
  • OS: windows 10
  • Provided sample code: No
  • Provided link: Yes