Multi Step Form Js Demo

Example Demo using: https://github.com/mgildea/Multi-Step-Form-Js

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validation-unobtrusive/3.2.6/jquery.validate.unobtrusive.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<body>

    <div id="wrapper">

        <div id="container body-content">

            <div class="progress">
                <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
                    <span class="sr-only">0% Complete</span>
                </div>
            </div>
            <form class="form-horizontal msf">
                <div class="msf-header">
                    <div class="row text-center">
                        <div class="msf-step col-md-4"><i class="fa fa-clipboard"></i> <span>Enter Request Details</span></div>
                        <div class="msf-step col-md-4"><i class="fa fa-credit-card"></i><span>Further Details</span></div>
                        <div class="msf-step col-md-4"><i class="fa fa-check"></i> <span>Review and Submit</span></div>
                    </div>
                </div>

                <div class="msf-content">
                    <div class="msf-view">

                        <div class="row">
                            <div class="col-md-6 col-md-offset-3">
                                <div class="form-group">
                                    <input id="name" name="name" type="text" class="form-control" placeholder="Name" data-bind="value: Name" data-val="true"
...

CSS

.msf-view {
            display: none;
        }
        
        .msf-navigation {
            text-align: center;
        }
        
        .msf-nav-button {
            display: none;
        }
        
        .msf-header {
            padding-top: 10px;
            margin-bottom: 40px;
            color: #777;
        }
        
        .msf-header .msf-step {
            font-size: 20px;
            /*display : inline-block;
       vertical-align : middle;*/
        }
        .msf-header .msf-step:hover {
            cursor: pointer;
        }
        
        .msf-header .msf-step i.fa {
            height: 60px;
            width: 60px;
            line-height: 55px;
            text-align: center;
            border: 3px solid #777;
            border-radius: 100%;
            font-size: 30px;
            margin-left: 10px;
            margin-right: 10px;
        }
        
        .msf-header .msf-step.msf-step-complete {
            /*color: #ef4035;*/
            color: green;
        }
        
        .msf-header .msf-step.msf-step-complete i.fa {
            /*border-color : #ef4035;*/
            border-color: green;
        }

        .msf-header .msf-step.msf-step-incomplete {
            /*color: #ef4035;*/
            color:red;
        }
        
        .msf-header .msf-step.msf-step-incomplete i.fa {
            /*border-color : #ef4035;*/
            border-color: red;
        }
        
        .msf-header .msf-step.msf-step-active,
        .msf-header .msf-step.msf-step-active.msf-step-complete,
        .msf-header .msf-step.msf-step-active.msf-step-incomplete {
            color: blue;
            /*color:#3c763d;*/
        }
        
        .msf-header .msf-step.msf-step-active i.fa,
        .msf-header .msf-step.msf-step-active.msf-step-complete i.fa,
        .msf-header .msf-step.msf-step-active.msf-step-incomplete i.fa  {
            border-color: blue;
            /*border-color : #3c763d;*/
        }

       ...

JavaScript

(function(factory) {
    'use strict';
    if (typeof define === 'function' && define.amd) {
        // AMD is used - Register as an anonymous module.
        define(['jquery', 'jquery-validation'], factory);
    }
    else if (typeof exports === 'object') {
        factory(require('jquery'), require('jquery-validation'));
    }
    else {
        // Neither AMD nor CommonJS used. Use global variables.
        if (typeof jQuery === 'undefined') {
            throw 'multi-step-form-js requires jQuery to be loaded first';
        }
        if (typeof jQuery.validator === 'undefined') {
            throw 'multi-step-form-js requires requires jquery.validation.js to be loaded first';
        }
        factory(jQuery);
    }
}(function($) {
    'use strict';

    const msfCssClasses = {
        header: "msf-header",
        step: "msf-step",
        statuses: {
            stepComplete: "msf-step-complete",
            stepIncomplete: "msf-step-incomplete",
            stepActive: "msf-step-active"
        },
        content: "msf-content",
        view: "msf-view",
        navigation: "msf-navigation",
        navButton: "msf-nav-button"
    };

    const msfNavTypes = {
        back: "back",
        next: "next",
        submit: "submit"

    };

    const msfJqueryData = {
        validated: "msf-validated",
        visited: "msf-visited"
    };

    const msfEventTypes = {
        viewChanged: "msf:viewChanged"
    };

    $.fn.multiStepForm = function(options) {
        var form = this;

        var defaults = {
            activeIndex: 0,
            validate: {},
            hideBackButton: false,
            allowUnvalidatedStep: false,
            allowClickNavigation: false
        };

        var settings = $.extend({}, defaults, options);

        //find the msf-content object
        form.content = this.find("." + msfCssClasses.content).first();

        if (form.content.length === 0) {
            throw new Error('Multi-Step Form requires a child element...