Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: Vertical Stepper Validation Not Triggered After Each Step Like Linear Validation

jammerxd2 priority asked 1 year ago


Expected behavior

The vertical multi-step wizard will prevent moving to the next step if the current step is invalid just like the linear one.

Actual behavior

The vertical stepper doesn't perform any validation when navigating to the next step.

Resources (screenshots, code snippets etc.)

Use the form wizard example, in linear mode, click next without putting anything into the textboxes and see that form validation is performed.

Now switch the linear flag to the vertical flag, notice how the validation is ignored and steps can be advanced without valid input.

https://mdbootstrap.com/docs/vue/components/stepper/#section-form-wizard


Bartosz Cylwik staff answered 1 year ago


Hi! The basic validation is only used in linear mode (with linear prop). You can use linear and vertical props together. Best Regards!


jammerxd2 priority commented 1 year ago

Looks like this still isn't working as expected. The validator skips over steps in between when a header is clicked. So for example going from Step 1 which is in a valid state, to step 4, skipping steps 2 and 3 - which are in an invalid state but haven't been visited, will cause the vertical stepper to ignore the invalid state on step 2 and 3 and allow the transition to step 4 - unlike the linear stepper.


Bartosz Cylwik staff commented 1 year ago

Thanks for reporting this issue. I've added this to our TO-FIX list.



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: Priority
  • Premium support: Yes
  • Technology: MDB Vue
  • MDB Version: MDB5 4.1.1
  • Device: Any
  • Browser: Firefox, Chrome, Edge
  • OS: All
  • Provided sample code: No
  • Provided link: Yes