Good evening, I apologize if im not wording this properly but im going to do my best.
I am making a multi step application using a multi state box.
I have drop menu selections in the application.
I want to enable the next button on the form after validating a selection has been chosen.
How would i properly write that code?
Thanks in advance
You can use this event handler to do something whenever the dropdown’s value changes: https://www.wix.com/velo/reference/$w/dropdown/onchange
I have built a series of these. What kind of inputs are on your page? Considering the parent elements is the multi state box- you would just get all inputs inside the parent and validate before changing the state of the multi box. Here’s an example and you will have to change your code of course.
This example has a 4 page form via a multi box. I am still using the dataset to submit so only need to validate for first three. You will also make all fields unrequired initially and update via code depending on the step they are on.
Step 1:
Import APIs:
import wixData from ‘wix-data’ ;
import { session } from ‘wix-storage’ ;
import wixWindow from ‘wix-window’ ;
//variables
let defaultResultsTxt
let idFormInputs = {
box1: [],
box2: [],
box3: [], //only showing 2 in this example
box4: [] //only showing 2 in this example
}
Step 2:
create an on ready function.
$w . onReady ( async function () {
//set result text default
defaultResultsTxt = $w ( '#noResultsTxt' ). text
//set box 1-4
await setBox1 ()
await setBox2 ()
await setBox3 ()
//await setBox4()
console . log ( idFormInputs , 'id form inputs' )
//check to see if fields are validated for step 4
$w ( '#idMultiBox' ). onChange (() => {
let currentState = $w ( '#idMultiBox' ). currentState
if ( currentState.id === '4' ) {
console . log ( 'final step' )
let totalInvalid = 0
//check input validations
idFormInputs.box1 . forEach ( function ( item ) {
if ( ! item.valid ) {
console . log ( item.id , 'box 1 final step not valid' )
//$w(`#${item.id}`).updateValidityIndication()
totalInvalid = totalInvalid + 1
}
})
idFormInputs.box2 . forEach ( function ( item ) {
if ( ! item.valid ) {
console . log ( item.id , 'box 2 final step not valid' )
//$w(`#${item.id}`).updateValidityIndication()
totalInvalid = totalInvalid + 1
}
})
idFormInputs.box3 . forEach ( function ( item ) {
if ( ! item.valid ) {
console . log ( item.id , 'box 3 final step not valid' )
//$w(`#${item.id}`).updateValidityIndication()
totalInvalid = totalInvalid + 1
}
})
}
})
});
Step 3:
Set up parent boxes to get input data – called during submission steps to validate:
async function setBox1 () {
//log children inputs in multi box
//set box 1
let box1 = $w ( ‘#form1ParentBox’ ). children
let children = []
await box1 . forEach ( async function ( item ) {
if ( item.type === "$w.TextInput" || item.type === '$w.Dropdown' || item.type === '$w.DatePicker' ) {
idFormInputs.box1 . push ( item )
}
if ( item.children ) {
children . push ( item.children )
}
})
if ( children.length > 0 ) {
await children . forEach ( function ( item ) {
item . forEach (( item , index ) => {
if ( item.type === "$w.TextInput" || item.type === '$w.Dropdown' || item.type === '$w.DatePicker' ) {
idFormInputs.box1 . push ( item )
}
})
})
}
}
async function setBox2 () {
//log children inputs in multi box
//set box 2
let box2 = $w ( ‘#form2ParentBox’ ). children
let children = []
await box2 . forEach ( async function ( item ) {
if ( item.type === "$w.TextInput" || item.type === '$w.Dropdown' || item.type === '$w.DatePicker' ) {
idFormInputs.box2 . push ( item )
}
if ( item.children ) {
children . push ( item.children )
}
})
if ( children.length > 0 ) {
await children . forEach ( function ( item ) {
item . forEach (( item , index ) => {
if ( item.type === "$w.TextInput" || item.type === '$w.Dropdown' || item.type === '$w.DatePicker' ) {
idFormInputs.box2 . push ( item )
}
})
})
}
}
Step 4:
Set up event handlers to go to next step if valid-- only providing steps to first 2 boxes:
//multi box 1
export async function submitIdForm1_click ( event ) {
console . log ( idFormInputs.box1 , ‘box 1’ )
let totalInvalid = 0
//check input validations
idFormInputs.box1 . forEach ( function ( item ) {
if ( item.valid === true ) {
console . log ( item.id , 'valid' )
$w ( `# ${ item.id } ` ). updateValidityIndication ()
}
if ( ! item.valid ) {
console . log ( item.id , 'not valid' )
$w ( `# ${ item.id } ` ). updateValidityIndication ()
totalInvalid = totalInvalid + 1
$w ( '#failMsg1' ). expand ()
}
})
if ( totalInvalid === 0 ) {
$w ( '#failMsg1' ). collapse ()
$w ( '#idMultiBox' ). changeState ( '2' ). then (() => {
$w ( '#progressBar2' ). scrollTo (). then (() => {
wixWindow . scrollBy ( 0 , - 35 ); //scroll up 35 px
})
})
$w ( '#progressBar2' ). value = 33
requireIdForm2Inputs ( true )
//collapse selection tag -- booking ID & booking ID Box (input)
$w ( '#tagsBox' ). collapse ()
$w ( '#bookingIdBox' ). collapse ()
}
console . log ( totalInvalid , 'Total Invalid' )
}
//multi box 2
export async function submitIdForm2_click ( event ) {
console . log ( idFormInputs.box2 , ‘box 2’ )
let totalInvalid = 0
//check input validations
idFormInputs.box2 . forEach ( function ( item ) {
if ( item.valid === true ) {
console . log ( item.id , 'valid' )
$w ( `# ${ item.id } ` ). updateValidityIndication ()
}
if ( ! item.valid ) {
console . log ( item.id , 'not valid' )
$w ( `# ${ item.id } ` ). updateValidityIndication ()
totalInvalid = totalInvalid + 1
$w ( '#failMsg2' ). expand ()
}
})
if ( totalInvalid === 0 ) {
$w ( '#failMsg2' ). collapse ()
$w ( '#idMultiBox' ). changeState ( '3' ). then (() => {
$w ( '#progressBar3' ). scrollTo (). then (() => {
wixWindow . scrollBy ( 0 , - 35 ); //scroll up 35 px
})
})
$w ( '#progressBar3' ). value = 66
}
console . log ( totalInvalid , 'Total Invalid' )
}
This should be enough for you to get started. Not sure if you’re familiar with JS or multi state but, but best of luck! Be sure to use velo documentation here!