فرم مرحله ای
یک پلاگین همه فن حریف و پر امکانات برای ایجاد فرم های مرحله ای. صفحه دمو.
<!-- 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;
}
}
});