Formulaire à étapes

Questions ou commentaires?

Needs translation

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.

Check other provisional features available.

But

Offre la possibilité de diviser un formulaire en différentes étapes (sans ou avec validation de formulaire).

Utiliser lorsque

  • Les formulaires sont longs ou contiennent un substantiel d'information.

Exemple pratique

Comment implémenter le plucigiel

  1. Créez un élément <div> avec la classe wb-steps (vous pouvez aussi ajouter la classe wb-frmvld pour intégrer la validation). 
    <div class="wb-frmvld wb-steps"></div>
  2. À l'intérieur de cet élément <div>, ajoutez un élément <form>. 
    <form action="#" method="get" id="steps-example"></form>
  3. À l'intérieur de cet élément <form>, ajoutez un élément <fieldset> qui aura besoin d'une légende <legend> et d'un conteneur <div>. Ces éléments <fieldset> deviendront les étapes de votre formulaire 
    <fieldset>
    <legend>Informations du client</legend>
    <div>(Tout contenu situé à l'intérieur du div sera caché.)</div>
    </fieldset>

Paramètres de configuration

Aucun paramètre de configuration.

Événements

Événement Déclencheur Effet déclenché
wb-init.wb-steps Déclenché manuellement (ex. : $( ".wb-steps" ).trigger( "wb-init.wb-steps" );). Utilisé pour initialisé manuellement le formulaire à étapes. Note : La validation de formulaire devra être initialisée au préalable avant d'initialiser wb-steps (vous pouvez ajouter wb-frmvld au <div> conteneur et ainsi déclencher l'événement sur cet élément).
wb-ready.wb-steps (v4.0.24+) Déclenché automatiquement après l'initialisation du formulaire à étapes. Utilisé afin d'identifié l'élément sur lequel le formulaire à étapes a été initialisé (la cible de l'événement) 
$( document ).on( "wb-ready.wb-steps", ".wb-steps", function( event ) {});
$( ".wb-steps" ).on( "wb-ready.wb-steps", function( event ) {});
wb-ready.wb (v4.0.24+) Déclenché automatiquement lorsque la WET-BOEW a terminé son chargement et son exécution. Utilisé pour identifié le moment lorsque tous les plugiciels et tous les polyfills de la WET-BOEW ont terminés de charger et de s'exécuter. 
$( document ).on( "wb-ready.wb", function( event ) {});

Code source

Code source du plugiciel de formulaire à étapes sur GitHub

Date de modification :