<!-- 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>Personal Information</h3>  <section class="card card-body border mb-0">    <h5>Personal Information</h5>    <p>Try the keyboard navigation by clicking arrow left or right!</p>  </section>  <h3>Billing Information</h3>  <section class="card card-body border mb-0">    <h5>Billing Information</h5>    <p>Wonderful transition effects.</p>  </section>  <h3>Payment Details</h3>  <section class="card card-body border mb-0">    <h5>Payment Details</h5>    <p>The next and previous buttons help you to navigate through your content.</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>Personal Information</h3>    <section class="card card-body border mb-0">        <h5>Personal Information</h5>        <p>Try the keyboard navigation by clicking arrow left or right!</p>        <form id="form1">            <div class="form-group wd-xs-300">                <label>First name</label>                <input type="text" class="form-control" placeholder="First name" required>                <div class="valid-feedback">                    Looks good!                </div>            </div>            <div class="form-group wd-xs-300">                <label>Last name</label>                <input type="text" class="form-control" name="lastname" placeholder="Enter lastname"                       required>                <div class="valid-feedback">                    Looks good!                </div>            </div>        </form>    </section>    <h3>Billing Information</h3>    <section class="card card-body border mb-0">        <h5>Billing Information</h5>        <p>Wonderful transition effects.</p>        <form id="form2">            <div class="form-group wd-xs-300">                <label class="form-control-label">Email: <span class="tx-danger">*</span></label>                <input id="email" class="form-control" name="email" placeholder="Enter email address"                       type="email" required>                <div class="valid-feedback">                    Looks good!                </div>            </div>        </form>    </section>    <h3>Payment Details</h3>    <section class="card card-body border mb-0">        <h5>Payment Details</h5>        <p>The next and previous buttons help you to navigate through your content.</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;        }    }});