jquery-steps

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-steps/1.1.0/jquery.steps.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div id="example-vertical">
  <h3>Main Info</h3>
  <section>
    <p>Proposal is a project idea that you bring together the Design Patterns as building blocks in oerder to solve a real life problem. Lets build one together!
      <br>
      <br> Name:
      <br>
      <input type="text" name="firstname">
      <br> Description:
      <br>
      <textarea name="Text1" cols="40" rows="5"></textarea>

    </p>
  </section>
  <h3>Sensors</h3>
  <section>
    <p>If your design includes any sensor please select a design patterns that best suits. If you can not find the design pattern that you want to use send it to us. We can add it to our librarry.
      <br>
 

    </p>
  </section>
  <h3>Processing</h3>
  <section>
    <p>The next and previous buttons help you to navigate through your content.</p>
  </section>
  <h3>Communications</h3>
  <section>
    <p>The next and previous buttons help you to navigate through your content.</p>
  </section>
  <h3>User Interface</h3>
  <section>
    <p>The next and previous buttons help you to navigate through your content.</p>
  </section>
  <h3>Storage</h3>
  <section>
    <p>The next and previous buttons help you to navigate through your content.</p>
  </section>
  <h3>Voltage</h3>
  <section>
    <p>The next and previous buttons help you to navigate through your content.</p>
  </section>
  <h3>Physical</h3>
  <section>
    <p>The next and previous buttons help you to navigate through your content.</p>
  </section>
</div>

CSS

/*
    Common 
*/

.wizard,
.tabcontrol {
  display: block;
  width: 100%;
  overflow: hidden;
}

.wizard a,
.tabcontrol a {
  outline: 0;
}

.wizard ul,
.tabcontrol ul {
  list-style: none !important;
  padding: 0;
  margin: 0;
}

.wizard ul > li,
.tabcontrol ul > li {
  display: block;
  padding: 0;
}


/* Accessibility */

.wizard > .steps .current-info,
.tabcontrol > .steps .current-info {
  position: absolute;
  left: -999em;
}

.wizard > .content > .title,
.tabcontrol > .content > .title {
  position: absolute;
  left: -999em;
}


/*
    Wizard
*/

.wizard > .steps {
  position: relative;
  display: block;
  width: 100%;
}

.wizard.vertical > .steps {
  display: inline;
  float: left;
  width: 30%;
}

.wizard > .steps .number {
  font-size: 1.429em;
}

.wizard > .steps > ul > li {
  width: 25%;
}

.wizard > .steps > ul > li,
.wizard > .actions > ul > li {
  float: left;
}

.wizard.vertical > .steps > ul > li {
  float: none;
  width: 100%;
}

.wizard > .steps a,
.wizard > .steps a:hover,
.wizard > .steps a:active {
  display: block;
  width: auto;
  margin: 0 0.5em 0.5em;
  padding: 1em 1em;
  text-decoration: none;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

.wizard > .steps .disabled a,
.wizard > .steps .disabled a:hover,
.wizard > .steps .disabled a:active {
  background: #eee;
  color: #aaa;
  cursor: default;
}

.wizard > .steps .current a,
.wizard > .steps .current a:hover,
.wizard > .steps .current a:active {
  background: #2184be;
  color: #fff;
  cursor: default;
}

.wizard > .steps .done a,
.wizard > .steps .done a:hover,
.wizard > .steps .done a:active {
  background: #9dc8e2;
  color: #fff;
}

.wizard > .steps .error a,
.wizard > .steps .error a:hover,
.wizard > .steps .error a:active {
  background: #ff3111;
  color: #fff;
}

.wizard > .content {
  background: #eee;
  display: block;
  margin: 0.5em;
  min-height: 35em;
  overflow: hidden;
  position: relative;
  width: auto;
  -webkit-border-radius: 5px;
 ...

JavaScript

$("#example-vertical").steps({
    headerTag: "h3",
    bodyTag: "section",
    transitionEffect: "slideLeft",
    onStepChanged: function (event, currentIndex, priorIndex) {
        if(currentIndex != 7){
            var result = $('ul[aria-label=Pagination]').children().find('a');
            $(result).each(function () {
                $(this).css('display', 'block');        //turn everything visible again
            });
        }
        if (currentIndex === 1 && priorIndex === 0) {

        }
        },
        onFinishing: function (event, currentIndex) {
            var form = $(this);
            var result = $('ul[aria-label=Pagination]').children().find('a');
            $(result).each(function () {
                if ($(this).text() == 'Finish') {
                    //$(this).attr('disabled', 'disabled');
                    //$(this).css('background', 'green');
                    $(this).css('display', 'none');
                    alert("Now you cannot click the #finish button twice,"+ 
                        "press Previous and it will reappear");
                }
            });

        form.validate().settings.ignore = ":disabled, :hidden";

        return form.valid();
        },
        onFinished: function (event, currentIndex) {
            alert(event+":"+currentIndex);
            var form = $(this);
            event.preventDefault();
            getResult();
            // enableFinishButton: false;
            // Submit form input
            //form.submit();
        },
    stepsOrientation: "vertical", 
    }).validate({
        /* 
        submitHandler: function() { 
            alert("submit handler function not being called, validate not working");
            $("#finish").prop('disabled', true);
        },
        success: function(response){
            alert("success function not being called, validate not working");
            $("#finish").prop('disabled', false); 
        },
        */

        errorPlacement: function...