如何在带有验证的垂直表单步骤中合并进度条

问题描述

我在下面的Jquery步骤中使用了“垂直表单”步骤

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

一切正常。现在，当我单击不带引导程序的下一个按钮时，我想显示带有验证的进度条。 有人可以帮忙吗？

我到目前为止所做的代码，

$("#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>

解决方法

立即检查

var sum = 0
function run(number,cb) {
  sum += number;
  if(number === 15000) {
        return cb(sum);
  }
  ++number;
  setImmediate(run,number,cb);
}

run(1,(result) => {
  if(result) {
    console.log(result);
  }
});

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