Guys how can you add form validation to such a multi-step form?
I want to do validation at each step before moving to the next step.
I’m guessing doing the normal validation will only do it at the last step when the form is to be submitted.
I’m very new here, just second day of actually doing anything in wappler so still navigating my way around things.
Thanks
you can add “disable” option to next button
@s.alpaslan Thanks for response. I can do that.
But I want to have the normal validation indication where you highlight the input in red and show a message under each input that isn’t valid.
@s.alpaslan thanks for the link.
But none of the tutorials there shows a multi-step form validation. It only shows how to build a multi-step form and then how to validate a single page form not a multi-step form.
Hi @Seanhoots, welcome! 
I’m sure there are other ways. I have built one multi-step form that is actually a separate form for each step, which gets submitted before going to the next step. For instance, the video below has two steps.
Step 1: Updates the “Accounts” table related to the User.
Step 2: Updates the “Users” table related to the User.
Here’s are the two forms in App Structure.
Here’s a small snippet of page code showing the forms collapsed.
Thanks @kfawcett the example.
I can see how that will work if i’m submitting each step. I will just have to do normal form validation.
In my case the form should only be saved in the database when the user makes payment and submit the form. So I don’t want to save each step. There is also no account (no login) required for people to submit the form.
You may be able to do something similar using session variables. I wonder if some combo of a Step session variable and javascript to make specific fields required based on the “Step” session variable would work?
@Seanhoots you might want to spend some time going through the tutorials that @ben put together here
Here’s the final product.
https://hollandtrade.com.au/wcart/
Hello @Seanhoots
You can add validation to your inputs, and disable the next button also if an input is invalid.
Example:
The input has an email validation rule applied:
Then you can disable the button, when the input is empty or invalid:
Result:
I think he needs to validate when "next " button clicked
Guys,
Jumping on this old convo to know whether we can use the Tabs with Nav component for building a multi-step form? The active tab would highlight the progress in the steps.
Hello guys,
I have a multi step form where I want to validate “Required Fields” when click the “next” button, if any of the required fields are empty, I would like to show the validation message and not go to the next steps.
How to accomplish this? Need some guidance here…Thanks!
I’ve not done this myself but you should be able to trigger the validation when your ‘next’ button is clicked. I think there’s an app connect action that would do that.
I’ve just checked this out further. There’s a Validate action available for each field so it looks like you would have to add that for each one. Unless your first step submits the form in which case all the validation would happen anyway.
@sitestreet Jon! You nailed it! It was not working before, due to the name field that wappler use when picking from the form list…My form is inside a “conditional region”, so when pick the field on field list, wappler show as “conditional_region.input.value”, I just remove “conditional_region” and worked.
Thanks!
