Stepper validation - Select elements are not highlighted whe

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

softcon pro premium asked 3 years 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 pro premium commented 3 years 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 3 years ago

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

softcon pro premium commented 3 years 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 3 years ago

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

Add comment