Steps Form
Unstable feature
To be used at your own risk. This feature described below can be removed in any subsequent minor/major release
Learn more about the design decision around provisional features.
Purpose
This component provides the ability to break a form into steps.
Use when
- Web forms are long/contain lot of information.
Working example
How to implement
- Create a
<div>
element with classwb-steps
(you can also add classwb-frmvld
for validation).<div class="wb-frmvld wb-steps"></div>
- Within previous the
<div>
element add a<form>
element.<form action="#" method="get" id="steps-example"></form>
- Within previous the
<form>
element add your<fieldset>
element which will need an<legend>
and<div>
. These will become your steps<fieldset>
<legend>Client Information</legend>
<div>(Any content in the div will be hidden.)</div>
</fieldset>
Configuration options
There are no configuration options.Events
Document the public events that can be used by implementers or developers.
Event | Trigger | What it does |
---|---|---|
wb-init.wb-steps |
Triggered manually (e.g., $( ".wb-steps" ).trigger( "wb-init.wb-steps" ); ). |
Used to manually initialize the steps form. Note: You'll need to initialize Form validation before initializing wb-steps (you can add the wb-frmvld to the a <div> then trigger that div). |
wb-ready.wb-steps (v4.0.24+) |
Triggered automatically after steps form initializes. | Used to identify the element where steps form has initialized (target of the event)
|
wb-ready.wb (v4.0.24+) |
Triggered automatically when WET has finished loading and executing. | Used to identify when all WET plugins and polyfills have finished loading and executing.
|
Source code
- Date modified: