<!-- Css -->
<link rel="stylesheet" href="vendors/form-wizard/jquery.steps.css" type="text/css">

<!-- Javascript -->
<script src="vendors/form-wizard/jquery.steps.min.js"></script>

<div id="wizard-example">
  <h3>اطلاعات شخصی</h3>
  <section class="card card-body border mb-0">
    <h5>اطلاعات شخصی</h5>
    <p>با کلیک روی پیکان سمت چپ یا راست ، ناوبری صفحه کلید را امتحان کنید!</p>
  </section>
  <h3>اطلاعات صورت حساب</h3>
  <section class="card card-body border mb-0">
    <h5>اطلاعات صورت حساب</h5>
    <p>دارای افکت فوق‌العاده</p>
  </section>
  <h3>جزییات پرداخت</h3>
  <section class="card card-body border mb-0">
    <h5>جزییات پرداخت</h5>
    <p>دکمه های بعدی و قبلی به شما کمک می کند تا از طریق محتوای خود حرکت کنید.</p>
  </section>
</div>

$('#wizard-example').steps({
    headerTag: 'h3',
    bodyTag: 'section',
    autoFocus: true,
    titleTemplate: '<span class="wizard-index">#index#</span> #title#'
});

<div id="wizard-example">
    <h3>اطلاعات شخصی</h3>
    <section class="card card-body border mb-0">
        <h5>اطلاعات شخصی</h5>
        <p>با کلیک روی پیکان سمت چپ یا راست ، ناوبری صفحه کلید را امتحان کنید!</p>
        <form id="form1">
            <div class="form-group wd-xs-300">
                <label>نام</label>
                <input type="text" class="form-control" placeholder="نام" required>
                <div class="valid-feedback">
                    عالی!
                </div>
            </div>
            <div class="form-group wd-xs-300">
                <label>نام خانوادگی</label>
                <input type="text" class="form-control" name="lastname" placeholder="نام خانوادگی"
                       required>
                <div class="valid-feedback">
                    عالی!
                </div>
            </div>
        </form>
    </section>
    <h3>اطلاعات صورت حساب</h3>
    <section class="card card-body border mb-0">
        <h5>اطلاعات صورت حساب</h5>
        <p>دارای افکت فوق‌العاده</p>
        <form id="form2">
            <div class="form-group wd-xs-300">
                <label class="form-control-label">ایمیل: <span class="tx-danger">*</span></label>
                <input id="email" class="form-control" name="email" placeholder="ایمیل"
                       type="email" required>
                <div class="valid-feedback">
                    عالی!
                </div>
            </div>
        </form>
    </section>
    <h3>جزییات پرداخت</h3>
    <section class="card card-body border mb-0">
        <h5>جزییات پرداخت</h5>
        <p>دکمه های بعدی و قبلی به شما کمک می کند تا از طریق محتوای خود حرکت کنید.</p>
    </section>
</div>

$('#wizard-example').steps({
    headerTag: 'h3',
    bodyTag: 'section',
    autoFocus: true,
    titleTemplate: '<span class="wizard-index">#index#</span> #title#',
    onStepChanging: function (event, currentIndex, newIndex) {
        if (currentIndex < newIndex) {
            var form = document.getElementById('form1'),
                form2 = document.getElementById('form2');

            if (currentIndex === 0) {
                if (form.checkValidity() === false) {
                    event.preventDefault();
                    event.stopPropagation();
                    form.classList.add('was-validated');
                } else {
                    return true;
                }
            } else if (currentIndex === 1) {
                if (form2.checkValidity() === false) {
                    event.preventDefault();
                    event.stopPropagation();
                    form2.classList.add('was-validated');
                } else {
                    return true;
                }
            } else {
                return true;
            }
        } else {
            return true;
        }
    }
});