Formulaire à étapes

Questions ou commentaires?

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

Évaluation et rapport

Comment implémenter le plugiciel

  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>
  4. (Facultatif) Ajoutez la classe quiz au div avec la classe wb-steps pour convertir en un format de quiz par étapes. 
    <div class="wb-frmvld wb-steps quiz"></div>

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 :