When using validation with wizard, clicking back requires validation to be satisfied

[csscallum]

Whilst building a form using the wizard form and validation components, I noticed I was unable to click to the previous step, unless that current stage's validation requirements were met. I feel it would make sense to allow the user to go back in the wizard without validation being satisfied on the current step.

I believe the code preventing this is the following:

form.element.addEventListener('click', function(event) {
  if(form.formValidator && (event.target.closest('.js-wiz-form__next') || event.target.closest('.js-wiz-form__prev'))) {
    // change step only if no errors are found
    form.formValidatorSteps[form.currentIndex].validate(function(errors) {
      if(errors.length == 0) changeStep(form, event);
    });
  } else {
    changeStep(form, event);
  }
});

I modified the above to the following to resolve it for my instance. JS isn't my strongest so this is probably not the best way of doing it.

form.element.addEventListener('click', function(event) {
  if(event.target.closest('.js-wiz-form__next')) {
    // change step only if no errors are found
    form.formValidatorSteps[form.currentIndex].validate(function(errors) {
      if(errors.length == 0) changeStep(form, event);
    });
  } else {
    // if not next, then prev button clicked go back
    changeStep(form, event);
  };
});

[claudia-romano]

Hi there, thanks for the heads-up! It makes sense. We'll push an updated version next week.

Cheers!

[claudia-romano]

We just released an updated version of the component. Cheers!