Multipage Form Validation

Discussion Ask a question
,
1

Hey there,

i’m trying to build a multipage form and it already looks pretty similar to this one here: https://www.wix.com/code/home/example/Multistage-Form

But now, I’ve got a question:

There’s a button to get to the next page. Is it possible to make this button only available when the input on the current slide is valid? As an example: In this multistage form here , “First Name” is required. I want to achieve, that the button “Save & Continue” only works, if “First Name” is valid, so somebody typed his name in that field.

Same if somebody typed text into a number-field. This is not valid, so the button should not be available so that the user can’t jump to the next slide.

Looking forward to your help!

2

Hi,

The article Validating User Input with Code will help you with this. You can also look at the appropriate validation properties and functions that are available for many components. Look at the valid property of TextInput as an example.

Good luck,

Yisrael

3

Did you find a solution to this, not going to next slide until fields are filled? If so, Can you kindly share. Thx

4

none of the examples given help with the multistage form setup

5

Can anyone share some snippets on how to implement validation for a multistage form?

6

Wix code doesn’t support custom validation on multistage form. Have to ditch multistage form and put 100 input elements on single page for it to work. Site looks so displeasing

7

Hi there,

what I did (and what I see as a good solution) is the following. You can disable the button for 2 seconds and reenable it when the input in the fields is not valid. Here input1 has to be filled out (not empty) and input2 needs to be bigger than 300.

export function button_click(event, $w, reject) {
	if ($w('#input1').value !== '' && $w('#input2').value > 300  ){
		showSlide2();
}	else {
	$w('#button').disable()
		
		$w('#text120').show();
		setTimeout (function ()
		{ $w('#button').enable()
			
		},2000) 

}
}
8

Wow! Nice one… let me try

9

It works… you’re a genius. Thanks alot!!

10

Glad that I could help you!

11

Hey I have a sort of similar problem with my user input validation. Every user input for my quiz is being marked “incorrect” no matter what. The answers are generated from a database, and into a hidden text box that appears after the user input is submitted.
I need code to check the user input against the text box. This seems simple but I cant find anything to help.

Here is my code atm:

export function button1_click() {
$w(“#input1”).onCustomValidation((value => {
if ($w(“#input1”).value !== $w(“#answerC”)){
$w(“#incorrect”).show();
$w(“#answerC”).show();
$w(“#correct”).hide();
}
else {
$w(“#correct”).show();
$w(“#answerC”).show();
$w(“#incorrect”).hide();

	}

Using wix codes dynamic pages and databases will keep me from having to program 1200+ iterations for each type of question one at a time. I really need this to work and it seems like it should be a simple fix.

If you are able to help I would be eternally grateful

12

Try changing “$w(” #answerC “)” to $w(" #answerC ").text

13

OH MY GOD THANK YOU

I have been tinkering for weeks and couldnt get any straight answers and that is exactly what I have been looking for

Thank you so much

14

Hello, I’m trying to do exactly the same thing as the OP, I have managed to get my button to work if the 2 inputs have a value above 50. but should the button be clicked before values are selected, it disables and doesn’t come back on. my code is below which i just copied from above.

i’m very new to this, it’s the last 4 lines that I don’t understand, what does the #text120 relate to? and the 2000.

thanks for any help in advance

export function button3_click(event, $w, reject) {
if ($w(‘#dropdown1’).value > 50 && $w(‘#dropdown2’).value > 25 ){
$w(‘#slideshow1’).changeSlide(1);
} else {
$w(‘#button3’).disable()

    $w('#text120').show(); 
    setTimeout ( **function**  () 
    { $w('#button3').enable() 

    },2000)
15

#text120 is the error message text box which is initially hidden and 3000 means that after 3 seconds the button3 will get enabled again.

16

@connectshubham Is there anyway to add a collapse function to text120? I’m trying to validate all inputs but seems like I could only add on else function in there.

export function button4_click(event) {
let text101 = ‘’;
if ($w(‘#input4’).valid && $w(‘#input5’).valid && $w(‘#input6’).valid && $w(‘#input8’).valid && $w(‘#input10’).valid && $w(‘#input9’).valid && $w(‘#dropdown3’).valid && $w(‘#input13’).valid && $w(‘#input12’).valid){
showbutton2();
}
else {
if (!$w(‘#input4’).valid);
text101 += “Please enter first name\n”;
if (!$w(‘#input5’).valid);
text101 += “Please enter last name\n”;
if (!$w(‘#input6’).valid);
text101 += “Please enter company name\n”;
if (!$w(‘#input8’).valid);
text101 += “Please enter address\n”;
if (!$w(‘#input10’).valid);
text101 += “Please enter suburb\n”;
if (!$w(‘#input9’).valid);
text101 += “Please enter postcode\n”;
if (!$w(‘#dropdown3’).valid);
text101 += “Please select state\n”;
if (!$w(‘#input13’).valid);
text101 += “Please enter an email address\n”;
if (!$w(‘#input12’).valid);
text101 += “Please enter a phone number\n”;

$w(‘#text101’).text = text101
$w(“#text101”).expand();

$w('#button4').disable() 
    setTimeout ( **function**  () 
    { $w('#button4').enable() 

    },2000) 
}  **else**   {

$w(“#text101”).collapse();

 }

}

17

@I.hottelmann Hi, just wondering if its possible to add another else function that has a collapse function into the code so I won’t have to create 36 textboxes.