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);
    }
  })
})