Integrate client side validation to Multi-Step form

Wappler General How To
#1

Not sure how I can add the validation to a multi-step form. Seeing as the Input[submit] at the last step triggers validation. The user does not see what validation errors are being flagged.

Any advice on how to get this working for a sensible user experience.

Thanks in advance!

#2

I have realised I can disable the button with different conditions. For example I have applied two values to the disabled attribute as follows:

!firstName.value+firstName.invalid

I have the “required” validation applied to the form input. The problem is how can I have an error message appear when the they click the next button as there is no indication to the user why the next button is not working!

#3

Just realised the above values do not work. The only value that I can get to work is:

!firstName.value

If I try to apply an invalid binding to the Button it does not work. I’ve seen @Teodor video post in the ‘Validating Multi-step form’ feed but this is not working for me.

#4

Really could do with some help on this @Teodor or anyone with knowledge

#5

@Teodor created a tutorial for this which might be helpul if you haven’t seen it.

#6

Well there are dynamic events - on click > input > validate. You can keep the next button enabled and run the validate action instead. It will show the validation message when the input is not filled.

1 Like
#7

Great Thanks @Teodor. This is exactly what i was after !

#8

@Teodor i’m not quite sure how to validate a radio group in this scenario. I find it strange that you can add a validation rule to each radio input separately. Plus I have this particular radio group in its own step.
I thought that maybe to just disable the next button for this but I can’t find a data binding that works.

Any suggestions.

Thanks in advance