Stepper for forms: move next and back programmatically

[gzuuus]

Hi, I was wondering if there is a convenient way to use stepper for form submission and first validate the input before moving on to the next step.
I've seen some issues related to this here in the repo, and also that it's something that will be included in next. But nevertheless I would like to know if there is already a convention to be able to use this in my app.
Actually I found this solution, but it's not working as I expect because it goes to the next Step even if the condition inside the if of case 0 is false:

function onNextHandler(e) {
	switch (e.detail.step) {
		case 0: //Login data
			if (!loginForm.checkValidity()) {
				return false; //Here the next stepper wont move to next step
			}
			return true; //Advance as normal
		case 1: //Subscription data
			break;
		case 2: //Payment data
			break;
		case 3: //Status data
			break;
	}
}

[Sarenor]

I'd probably use the locked state of a step instead of the onNextHandler which only gets called when/after the next step is already being displayed.

So something like

<Step locked={!yourCondition}>
  <!-- your content-->
</Step>