js-step
. It also contains two buttons for jumping to the previous or next step.
<
form
id
=
"
demoForm
"
method
=
"
POST
"
>
<
div
class
=
"
js-step
"
>
...
div
>
<
div
class
=
"
js-step
"
>
...
div
>
<
div
class
=
"
js-step
"
>
...
div
>
<
button
id
=
"
prevButton
"
>
Prev
button
>
<
button
id
=
"
nextButton
"
>
Next
button
>
form
>
<
html
>
<
head
>
<
link
rel
=
"
stylesheet
"
href
=
"
https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.3/css/uikit.min.css
"
/>
<
link
rel
=
"
stylesheet
"
href
=
"
/vendors/formvalidation/dist/css/formValidation.min.css
"
/>
head
>
<
body
>
<
form
id
=
"
demoForm
"
method
=
"
POST
"
>
...
form
>
<
script
src
=
"
https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.3/es6-shim.min.js
"
>
script
>
<
script
src
=
"
/vendors/formvalidation/dist/js/FormValidation.min.js
"
>
script
>
<
script
src
=
"
/vendors/formvalidation/dist/js/plugins/Wizard.min.js
"
>
script
>
<
script
>
document
.
addEventListener
(
'DOMContentLoaded'
,
function
(
e
)
{
FormValidation
.
formValidation
(
document
.
getElementById
(
'demoForm'
)
,
{
fields
:
{
...
}
,
plugins
:
{
// The options here matches with the form above
wizard
:
new
FormValidation
.
plugins
.
Wizard
(
{
stepSelector
:
'.js-step'
,
prevButton
:
'#prevButton'
,
nextButton
:
'#nextButton'
,
}
)
,
...
}
,
}
)
;
}
)
;
script
>
body
>
html
>
| Option | Type | Description |
|---|---|---|
isFieldExcluded
|
Function
|
Indicate which fields should be execluded |
isStepSkipped
|
Function
|
Skip a given step |
nextButton
*
|
String
or
Element
|
A CSS selector of the Next button |
prevButton
*
|
String
or
Element
|
A CSS selector of the Previous button |
stepSelector
*
|
String
|
A CSS selector of steps |
id
selector for the previous and next buttons, then they can be placed outside of the form as following:
<
form
>
...
form
>
<
button
id
=
"
prevButton
"
>
...
button
>
<
button
id
=
"
nextButton
"
>
...
button
>
FormValidation
.
formValidation
(
form
,
{
plugins
:
{
wizard
:
new
FormValidation
.
plugins
.
Wizard
(
{
prevButton
:
document
.
getElementById
(
'prevButton'
)
,
nextButton
:
document
.
getElementById
(
'nextButton'
)
,
}
)
,
}
,
}
)
;
isFieldExcluded
option is a function that takes three parameters and returns
true
or
false
:
FormValidation
.
plugins
.
Wizard
(
{
isFieldExcluded
:
function
(
field
:
string
,
element
:
HTMLElement
,
elements
:
HTMLElement
[
]
)
// field: The field name
// element: The field element
// elements: The field elements
// Returns `true` if you want to exclude the field, so it won't be validated
}
,
}
)
isStepSkipped
option is a function that takes
skipStepProps
parameter and returns
true
or
false
:
FormValidation
.
plugins
.
Wizard
(
{
isStepSkipped
:
function
(
skipStepProps
)
{
// skipStepProps.currentStep: The current step
// skipStepProps.numSteps: The total number of steps
// skipStepProps.targetStep: The target step
// Returns `true` if you want to skip the step
}
,
}
)
;
FormValidation
.
formValidation
(
form
,
{
fields
:
{
...
}
,
plugins
:
{
wizard
:
new
FormValidation
.
plugins
.
Wizard
(
{
// Triggered when a step is activated
onStepActive
:
function
(
e
)
{
// e.step is the zero-based index of current step
// e.numSteps is the number of steps
}
,
// Triggered when a step is invalid
onStepInvalid
:
function
(
e
)
{
// e.step is the zero-based index of current step
// e.numSteps is the number of steps
}
,
// Triggered when a step is valid
onStepValid
:
function
(
e
)
{
// e.step is the zero-based index of current step
// e.numSteps is the number of steps
}
,
// Triggered when all steps are valid
onValid
:
function
(
e
)
{
// e.numSteps is the number of steps
}
,
}
)
,
}
,
}
)
;
on()
as following:
FormValidation
.
formValidation
(
form
,
{
fields
:
{
...
}
,
plugins
:
{
wizard
:
new
FormValidation
.
plugins
.
Wizard
(
{
stepSelector
:
'...'
,
prevButton
:
'...'
,
nextButton
:
'...'
,
}
)
,
}
,
}
)
.
on
(
'plugins.wizard.step.active'
,
function
(
e
)
{
// Same as onStepActive option
}
)
.
on
(
'plugins.wizard.step.invalid'
,
function
(
e
)
{
// Same as onStepInvalid option
}
)
.
on
(
'plugins.wizard.step.valid'
,
function
(
e
)
{
// Same as onStepValid option
}
)
.
on
(
'plugins.wizard.valid'
,
function
(
e
)
{
// Same as onValid option
}
)
;
| Method | Description |
|---|---|
goToNextStep()
|
Jump to the next step. It's useful when users want to go to the next step automatically when a checkbox/radio button is chosen |
goToPrevStep()
|
Jump to the previous step |
goToStep(index: number)
|
Go to the given step |
// Create a FormValidation instance
const
fv
=
FormValidation
.
formValidation
(
form
,
{
fields
:
{
...
}
,
plugins
:
{
wizard
:
new
FormValidation
.
plugins
.
Wizard
(
)
,
}
,
}
)
;
// Get the Wizard plugin instance
const
wizardPlugin
=
fv
.
getPlugin
(
'wizard'
)
;
// Call the API
wizardPlugin
.
goToNextStep
(
)
;
onValid
option (or listen the
plugins.wizard.valid
event):
FormValidation
.
formValidation
(
form
,
{
fields
:
{
...
}
,
plugins
:
{
wizard
:
new
FormValidation
.
plugins
.
Wizard
(
{
onValid
:
function
(
e
)
{
// Submit the form when all steps are valid
form
.
submit
(
)
;
}
,
}
)
,
}
,
}
)
;
goToStep()
method
id
selectors
isFieldExcluded
option, so we can animate the current step when jumping between steps
isStepSkipped
option