Hi,
I'm using the wizard component and I've got multiple forms, almost one for each step.
Since the wizard provides a footer button to get to the next step, I removed the footer and the header of the forms, simply leaving the body containing the different fields.
Now, since the validation occurs when the form is submitted, I couldn't find a way to validate the form without submitting it.
Is there a way to attach the step button to the form validation, in order to enable it once the form is valid and keep it disabled when it's not?
Thanks!
@wilk-birdie
Hey there 
Just to clarify, are you looking to validate each form before moving on to the next step, but not submit the form? When do you want the form/forms to be submitted?
Hi @lauren.gus !
We're using forms as fields containers and we would like to attach the validation to the navigation buttons of the wizard.
We don't need to submit the forms because the logic is inside queries that are attached to virtual steps inside the wizard.
Is there a way to at least submit the form when the user clicks on the wizard navigation buttons?
Hi @wilk-birdie, If it's still helpful, you should be able to disable each step when a form isn't valid. Here's what that could look like:
You should also be able to submit your forms as part of the queries triggered by your virtual steps. Your virtual steps would need to trigger JS queries that call the .submit() function on the specific Form Component
Hi @everett_smith,
Thank you for your help!
So, I tried your solution as you can see from the following screenshots:
This is the result:
- the "Navigation 1" button remains enabled unless the user clicks on it so that the form gets validated: I'd expect to see it disabled until the user inserts some data and make it valid. Does the form have the concept of "pristine" status?
- when the user clicks on the "Navigation 1" button without filling the form (so the form is still invalid), it goes directly to Step 3, even if the virtual step should trigger the navigation once the form is valid. Is there a way to prevent the user from getting to Step 3 and returning to Step 1 if the form is invalid?
Thanks!
Hi @wilk-birdie, I overlooked the fact that the form isn't validated until it is submitted, so you will be able to click the navigation button despite the form being invalid. You can easily work around this by validating each component in the form in a JS query that you run whenever you reach this step in the workflow.
If this is the first step in the workflow that appears on page load, you could trigger your JS query to validate the form on page load. If it's not the first step, then you can trigger this validation query whenever the form first appears in the workflow.
I hope that helps!
Hi @everett_smith !
Yes, that would help and, in fact, we implemented a similar workaround: checking the different fields.
However, it would be good to have forms' validation attached to the wizard's navigation somehow.
Hi @wilk-birdie
I'm facing a similar problem. It would be great if you could share how you solved it. I am yet to find a solution!
Any planned updates to this? It's not the best-looking solution to have the form showing invalid input messages when the user hasn't entered anything yet. I think the best implementation would be to treat each panel of the wizards as a form rather than having to put a form into the wizard step. You could then have a "apply validation" toggle to each transition in the wizard step manager.
@cumminsj Can you share the specifics of the issue you're facing? Maybe we can help 
@alec-hs It's on our engineering team's radar to add an option to run validation on initial render. That being said, I don't have any time line I can share for when that option might be added. For now, you would need to either trigger validation—textInput1.validate()—or set the input component's to their own values—textInput1.setValue(input1.value)—(which would trigger the validation the same as user input).
