How to incorporate progress bar in vertical form step with validation

Question

I have used the Vertical Form Step from the below Jquery steps

http://www.jquery-steps.com/Examples

It's working fine. Now I want to show the progress bar with validation when I click the next button without bootstrap. Can anyone please help to make this?

The code I have done so far,

$("#example-vertical").steps({
    headerTag: "h3",
    bodyTag: "section",
    transitionEffect: "slideLeft",
    stepsOrientation: "vertical"
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="example-vertical">
        <h3>Keyboard</h3>
        <div id="myProgress">
            <div id="myBar">50%</div>
          </div>
        <section>
            <p>Try the keyboard navigation by clicking arrow left or right!</p>
        </section>
        <h3>Effects</h3>
        <section>
            <p>Wonderful transition effects.</p>
        </section>
        <h3>Pager</h3>
        <section>
            <p>The next and previous buttons help you to navigate through your content.</p>
        </section>
    </div>

Answer 1

Check now

var currentIndex;
        var steps;
        var wizardLength = $("#example-vertical").find('h3').length;
        $("#example-vertical").steps({
            headerTag: "h3",
            bodyTag: "section",
            transitionEffect: "slideLeft",
            stepsOrientation: "vertical",
            startIndex: 0,
            currentIndex:1,
            onInit:function (event, currentIndex) {
                setProgressBar(currentIndex);
             },
            onStepChanged: function (event, currentIndex, priorIndex) { 
                setProgressBar(currentIndex);
                //console.log(currentIndex);
                //console.log(wizardLength);
            },
           
        });

        // Change progress bar action
        function setProgressBar(currentIndex) {
            var percent = parseFloat(100 / wizardLength) * (currentIndex + 1);
            percent = percent.toFixed();
            $(".progress-bar")
                .css("width", percent + "%")
                .html(percent + "%");
        }

#myProgress{
        background: #eee;
    }
    .progress-bar{
        background: green;
        color: #fff;
        text-align: center;
        
    }

<link href="http://www.jquery-steps.com/Content/Examples.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-steps/1.1.0/jquery.steps.min.js"></script>

<div id="example-vertical">
        <h3>Keyboard</h3>
        <div id="myProgress">
            <div id="myBar" class="progress-bar">50%</div>
        </div>
        <section>
            <p>Try the keyboard navigation by clicking arrow left or right!</p>
        </section>
        <h3>Effects</h3>
        <section>
            <p>Wonderful transition effects.</p>
        </section>
        <h3>Pager</h3>
        <section>
            <p>The next and previous buttons help you to navigate through your content.</p>
        </section>
    </div>