<!-- Css --><link rel="stylesheet" href="libs/form-wizard/jquery.steps.css" type="text/css"><!-- Javascript --><script src="libs/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="mb-3 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="mb-3 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="mb-3 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}}});