Validating multi-step form

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.


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! :slight_smile:

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.

1 Like

Hello @Seanhoots
You can add validation to your inputs, and disable the next button also if an input is invalid.

The input has an email validation rule applied:

Then you can disable the button, when the input is empty or invalid:



I think he needs to validate when "next " button clicked