Multi-step form

Excepturi fugit Est ut

Tempora repellat expedita sequi qui eum sunt quaerat aperiam.
Voluptatum tempora repellat facilis earum quae in dignissimos occaecati
Sapiente cupiditate autem id voluptas hic architecto ab cumque vero in magni ut hic.
Sunt laboriosam qui tempore incidunt earum doloremque omnis consectetur.
Dolorum sed sunt fugiat asperiores
Radio buttons (inline):
Checkboxes (inline):
Magnam ducimus neque qui ut qui consequatur nemo commodi dolorem autem molestias maiores molestias

Attributes, events and methods

The data-attribute data-multistep-settings takes the following parameters:

{string} [panel='.form-multistep--panel'] - The CSS selector used for the panels.
  {bool} [progress=false] - Whether the progress bar is displayed.
  {bool} [nextButtonEnabled=false] - Whether the next button is interactive.
  {bool} [prevButtonEnabled=true] - Whether the previous button is interactive.
  {bool} [enableStepNav=false] - Whether the progress bar is interactive.
<form action="" id="multistep-form" method="post"
data-multistep-settings='{"progress": true, "enableStepNav": false, "nextButtonEnabled": false}'
class="form-multistep">

The following events are emitted:

multistepPanelLoaded
multistepNavigationDisabled
multistepNavigationEnabled
multistepPrevTriggered
multistepNextTriggered
multistepPanelEnabled
multistepPanelDisabled

The following public methods are attached to the UCASDesignFramework.multistep object:

// Initialise the multistep form.
// @param {object} context
init(context)

// Go to the next panel.
// @param {onSuccessCallback} callback
// @param {onFailureCallback} callback
next(onSuccess, onFailure)

// Go to the previous panel.
// @param {onSuccessCallback} callback
// @param {onFailureCallback} callback
prev(onSuccess, onFailure)

// Go to a panel.
// @param {number} index - the index of the panel in the panels array.
// @param {onSuccessCallback} callback
// @param {onFailureCallback} callback
goto(index, onSuccess, onFailure)

// Update the container height.
// @param {object} [panel=The current panel]
updateHeight(panel)

// Disable navigation.
// @param {object} [panel=The current panel]
disableNavigation(panel)

// Enable navigation.
// @param {object} [panel=The current panel]
enableNavigation(panel)

// Disable the submit button.
disableSubmit()

// Enable the submit button.
enableSubmit()

// Get a panel index.
// @param {object} [panel=A panel]
// @returns {object} The current panel object.
getIndex(panel)

Example

// A basic form validation script, which interacts with the multistep form api.
// Not suitable for production.
//
// Start by waiting for the Design Framework.
document.addEventListener('designFrameworkReady', function() {
  // Find the appropriate form.
  var multistep = $('#multistep-form')
  // Listen for a click on the next button.
  multistep.on('multistepNextTriggered', function(e, data) {
    var panelIndex = data.currentIndex;
    var inputs = $(data.panel).find('input, select');
    var validFieldSet = true;

    for (var i = 0; i < inputs.length; i++) {
      var valid = HTMLFormElement.prototype.checkValidity ? (inputs[i].reportValidity()) : (inputs[i].value === '' && inputs[i].required)
      if (!valid) {
          validFieldSet = false;
          // Each input can have its own data-error-message for a custom error message.
          var errorMessage = inputs[i].getAttribute('data-error-message') || 'Please fill in all required fields.'
          UCASDesignFramework.toast.error(errorMessage)
      }
    }
    if (validFieldSet) {
      UCASDesignFramework.multistep.goto(panelIndex + 1);
    }
  })
})