JS initialization setting(s)

If you are using linear stepper, clicking on the next and the previous step will work just like the buttons. Since 2.1 you can adjust some options. Here they are, with their respective defaults:

var stepper = document.querySelector('.stepper');
var stepperInstace = new MStepper(stepper, {
   // Default active step.
   firstActive: 0,
   // Allow navigation by clicking on the next and previous steps on linear steppers.
   linearStepsNavigation: true,
   // Auto focus on first input of each step.
   autoFocusInput: false,
   // Set if a loading screen will appear while feedbacks functions are running.
   showFeedbackPreloader: true,
   // Auto generation of a form around the stepper.
   autoFormCreation: true,
   // Function to be called everytime a nextstep occurs. It receives 2 arguments, in this sequece: stepperForm, activeStepContent.
   validationFunction: defaultValidationFunction, // more about this default functions below
   // Enable or disable navigation by clicking on step-titles
   stepTitleNavigation: true,
   // Preloader used when step is waiting for feedback function. If not defined, Materializecss spinner-blue-only will be used.
   feedbackPreloader: '<div class="spinner-layer spinner-blue-only">...</div>'
})

Form validation

As described in the previous topic, you can define a validation function to be called on every nextStep() in the stepper init options.

This function will be called with two parameters:

function validationFunction(stepperForm, activeStepContent) {
   // You can use the 'stepperForm' to valide the whole form around the stepper:
   someValidationPlugin(stepperForm);
   // Or you can do something with just the activeStepContent
   someValidationPlugin(activeStepContent);
   // Return true or false to proceed or show an error
   return true;
}

If you don't define anything, a default validation function will be used. This default function is the defaultValidationFunction. It's a simple form validation that works like this:

defaultValidationFunction(stepperForm, activeStepContent) {
   var inputs = activeStepContent.querySelectorAll('input, textarea, select');
   for (let i = 0; i < inputs.length; i++) if (!inputs[i].checkValidity()) return false;
   return true;
}

Horizontal and vertical

You can make your stepper horizontal just adding a ".horizontal" class to your primary "ul" tag. Since version 2.1 horizontal steppers are responsive and turns to vertical from 992px (width) down:

<ul class="stepper horizontal">...</ul>

For now, horizontal stepper contents doesn't have an automatic height. You can change the default size (458px) of your primary "ul" class with CSS:

ul.stepper.horizontal {
   min-height: 458px;
}

or inline:

<ul class="stepper horizontal" style="min-height:458px">...</ul>

IMPORTANT: THE HEIGHT OF THE ".stepper-content" TAG IS SUBTRACTED BY 84PX. SO, FOR EXAMPLE, IF YOU WANT YOUR CONTENT TO HAVE 400PX HEIGHT, YOU'LL NEED TO SET THE "min-height" OF YOUR PRIMARY "ul" TAG TO 484PX!

Linear and non-linear

If you want users to change between steps freely (without validations or the obligation to advance a step at a time), just remove .linear class from the primary ul:

<ul class="stepper">...</ul>

Form and inputs

If there is no "form" tag wrapping the ul, JS spawns it for the validate.js to work with the inputs (can be disabled). Since the primary funcion of stepper is to split some kind of form, for now, the only way to make a step required is to add "required" attribute to an input inside the .step-content container:

<input id="email" name="email" type="email" class="validate" required />
   

If the input is not valid, the icon will turn red until all required inputs become valid.

If you want to define your own attributes, just wrap the "ul" with a default "form", using any attributes you need:

<form action="youraction" method="yourmethod">
   <ul class="stepper linear">...</ul>
</form>
   

If you want to submit your stepper, just create a submit button with "submit" type and no feedback or "next/previous-step" class and if there's a wrapping form && a validation function, it'll call it before the submit (just return false to prevent it):

<button class="waves-effect waves-dark btn" type="submit">SUBMIT</button>

Step labels

You can add you own step labels by adding a "data-step-label" to your "step-titles" tags. Just like that:

<div data-step-label="OMG, they're so small and cute!" class="step-title waves-effect">Step title</div>

Navigate

Feedback function

There's a way to make the buttons run a function instead of proceeding, just add a data-feedback attribute with the function name to a ".next-step" classified button. Just like that:

<button class="waves-effect waves-dark btn next-step" data-feedback="checkEmailDB">CONTINUE</button>
<script>
   function checkEmailDB(destroyFeedback, form, activeStepContent) {
      // Do your stuff here
      // Call destroyFeedback() function when you're done
      // The true parameter will proceed to the next step besides destroying the preloader
      destroyFeedback(true);
   }
</script>

updateStepper method

instance.updateStepper();

resetStepper method

instance.resetStepper();

Get Steps

You can get information about the steps by running:

var currentSteps = instace.getSteps()
   

And you'll get an object like this on var currentSteps:

{
   steps: HTMLCollection, // The current steps in the DOM
   active: {
      step: HTMLElement, // The current active step in the DOM
      index: number // The index of the active step
   }
}

wrongStep method

instance.wrongStep();

Dynamically adding/removing steps

<script>
   var elements;
   // The element can be a string:
   elements = '<div class="step">(...your step goes here...)</div>';
   // An array of strings:
   elements = ['<div class="step">(...your step goes here...)</div>', '<div class="step">(...your step goes here...)</div>'];
   // An HTMLCollection:
   elements = document.querySelectorAll('.steps-to-add');
   // Or an HTMLElement:
   elements = document.querySelector('.step-to-add');

   // Then you just need to run
   var addedSteps = instance.activateStep(elements, newStepsIndex);
   // And if you want, you can remove them afterwards:
   var removedSteps = instance.deactivateStep(addedSteps);
   // Or add them again :P
   var readdedSteps = instance.activateStep(removedSteps);
</script>

Custom Events