We are using BS Stepper which is a powerful stepper for bootstrap.
Read the official BS Stepper Documentation for a full list of instructions and other options.
In order to use BS Stepper on your page, It is required to include the following vendors css in the "Vendors CSS" area from the page's header:
<link rel="stylesheet" href="assets/vendor/libs/bs-stepper/bs-stepper.css" />Include the following vendors script in the "Vendors JS" area from the page's footer:
<script src="assets/vendor/libs/bs-stepper/bs-stepper.js" />Horizontal
Using steps is really simple all you have to do is initialize it like this: new Stepper(YOUR_ELEMENT, {...options});. Horizontal is default orientation of the wizard.
<div class="bs-stepper wizard-numbered mt-2">
<div class="bs-stepper-header">
<div class="step" data-target="#account-details">
<button type="button" class="step-trigger">
<span class="bs-stepper-circle">1</span>
<span class="bs-stepper-label mt-1">
<span class="bs-stepper-title">Account Details</span>
<span class="bs-stepper-subtitle">Setup Account Details</span>
</span>
</button>
</div>
<div class="line">
<i class="bx bx-chevron-right"></i>
</div>
<div class="step" data-target="#personal-info">
<button type="button" class="step-trigger">
<span class="bs-stepper-circle">2</span>
<span class="bs-stepper-label mt-1">
<span class="bs-stepper-title">Personal Info</span>
<span class="bs-stepper-subtitle">Add personal info</span>
</span>
</button>
</div>
<div class="line">
<i class="bx bx-chevron-right"></i>
</div>
<div class="step" data-target="#social-links">
<button type="button" class="step-trigger">
<span class="bs-stepper-circle">3</span>
<span class="bs-stepper-label mt-1">
<span class="bs-stepper-title">Social Links</span>
<span class="bs-stepper-subtitle">Add social links</span>
</span>
</button>
</div>
</div>
<div class="bs-stepper-content">
<form onSubmit="return false">
<!-- Account Details -->
<div id="account-details" class="content">
<div class="content-header mb-3">
<h6 class="mb-0">Account Details</h6>
<small>Enter Your Account Details.</small>
</div>
<div class="row g-6">
<div class="col-md-6">
<label class="form-label" for="username">Username</label>
<input type="text" id="username" class="form-control" placeholder="johndoe" />
</div>
<div class="col-md-6">
<label class="form-label" for="email">Email</label>
<input type="email" id="email" class="form-control" placeholder="john.doe@email.com" aria-label="john.doe" />
</div>
<div class="col-md-6 form-password-toggle">
<label class="form-label" for="password">Password</label>
<div class="input-group input-group-merge">
<input type="password" id="password" class="form-control" placeholder="············" aria-describedby="password2" />
<span class="input-group-text cursor-pointer" id="password2"><i class="bx bx-hide"></i></span>
</div>
</div>
<div class="col-md-6 form-password-toggle">
<label class="form-label" for="confirm-password">Confirm Password</label>
<div class="input-group input-group-merge">
<input type="password" id="confirm-password" class="form-control" placeholder="············" aria-describedby="confirm-password2" />
<span class="input-group-text cursor-pointer" id="confirm-password2"><i class="bx bx-hide"></i></span>
</div>
</div>
<div class="col-12 d-flex justify-content-between">
<button class="btn btn-label-secondary btn-prev" disabled>
<i class="bx bx-chevron-left bx-sm ms-sm-n2"></i>
<span class="align-middle d-sm-inline-block d-none">Previous</span>
</button>
<button class="btn btn-primary btn-next">
<span class="align-middle d-sm-inline-block d-none me-sm-1 me-0">Next</span>
<i class="bx bx-chevron-right bx-sm me-sm-n2"></i>
</button>
</div>
</div>
</div>
<!-- Personal Info -->
<div id="personal-info" class="content">
<div class="content-header mb-3">
<h6 class="mb-0">Personal Info</h6>
<small>Enter Your Personal Info.</small>
</div>
<div class="row g-6">
<div class="col-md-6">
<label class="form-label" for="first-name">First Name</label>
<input type="text" id="first-name" class="form-control" placeholder="John" />
</div>
<div class="col-md-6">
<label class="form-label" for="last-name">Last Name</label>
<input type="text" id="last-name" class="form-control" placeholder="Doe" />
</div>
<div class="col-md-6">
<label class="form-label" for="country">Country</label>
<select class="select2" id="country">
<option label=" "></option>
<option>UK</option>
<option>USA</option>
<option>Spain</option>
<option>France</option>
<option>Italy</option>
<option>Australia</option>
</select>
</div>
<div class="col-md-6">
<label class="form-label" for="language">Language</label>
<select class="selectpicker w-auto" id="language" data-style="btn-transparent" data-icon-base="bx" data-tick-icon="bx-check text-white" multiple>
<option>English</option>
<option>French</option>
<option>Spanish</option>
</select>
</div>
<div class="col-12 d-flex justify-content-between">
<button class="btn btn-primary btn-prev"> <i class="bx bx-chevron-left bx-sm ms-sm-n2"></i>
<span class="align-middle d-sm-inline-block d-none">Previous</span>
</button>
<button class="btn btn-primary btn-next"> <span class="align-middle d-sm-inline-block d-none me-sm-1 me-0">Next</span> <i class="bx bx-chevron-right bx-sm me-sm-n2"></i></button>
</div>
</div>
</div>
<!-- Social Links -->
<div id="social-links" class="content">
<div class="content-header mb-3">
<h6 class="mb-0">Social Links</h6>
<small>Enter Your Social Links.</small>
</div>
<div class="row g-6">
<div class="col-md-6">
<label class="form-label" for="twitter">Twitter</label>
<input type="text" id="twitter" class="form-control" placeholder="https://twitter.com/abc" />
</div>
<div class="col-md-6">
<label class="form-label" for="facebook">Facebook</label>
<input type="text" id="facebook" class="form-control" placeholder="https://facebook.com/abc" />
</div>
<div class="col-md-6">
<label class="form-label" for="google">Google+</label>
<input type="text" id="google" class="form-control" placeholder="https://plus.google.com/abc" />
</div>
<div class="col-md-6">
<label class="form-label" for="linkedin">LinkedIn</label>
<input type="text" id="linkedin" class="form-control" placeholder="https://linkedin.com/abc" />
</div>
<div class="col-12 d-flex justify-content-between">
<button class="btn btn-primary btn-prev"> <i class="bx bx-chevron-left bx-sm ms-sm-n2"></i>
<span class="align-middle d-sm-inline-block d-none">Previous</span>
</button>
<button class="btn btn-success btn-submit">Submit</button>
</div>
</div>
</div>
</form>
</div>
</div>
const wizardNumbered = document.querySelector(".wizard-numbered");
if (typeof wizardNumbered !== undefined && wizardNumbered !== null) {
const wizardNumberedBtnNextList = [].slice.call(wizardNumbered.querySelectorAll('.btn-next')),
wizardNumberedBtnPrevList = [].slice.call(wizardNumbered.querySelectorAll('.btn-prev')),
wizardNumberedBtnSubmit = wizardNumbered.querySelector('.btn-submit');
const numberedStepper = new Stepper(wizardNumbered, {
linear: false
});
if (wizardNumberedBtnNextList) {
wizardNumberedBtnNextList.forEach(wizardNumberedBtnNext => {
wizardNumberedBtnNext.addEventListener('click', event => {
numberedStepper.next();
});
});
}
if (wizardNumberedBtnPrevList) {
wizardNumberedBtnPrevList.forEach(wizardNumberedBtnPrev => {
wizardNumberedBtnPrev.addEventListener('click', event => {
numberedStepper.previous();
});
});
}
if (wizardNumberedBtnSubmit) {
wizardNumberedBtnSubmit.addEventListener('click', event => {
alert('Submitted..!!');
});
}
}
Vertical
Use class .vertical to create a vertical wizard.
<div class="bs-stepper wizard-vertical vertical">
<div class="bs-stepper-header">
<div class="step" data-target="#account-details-1">
<button type="button" class="step-trigger">
<span class="bs-stepper-circle">1</span>
<span class="bs-stepper-label mt-1">
<span class="bs-stepper-title">Account Details</span>
<span class="bs-stepper-subtitle">Setup Account Details</span>
</span>
</button>
</div>
<div class="line"></div>
<div class="step" data-target="#personal-info-1">
<button type="button" class="step-trigger">
<span class="bs-stepper-circle">2</span>
<span class="bs-stepper-label mt-1">
<span class="bs-stepper-title">Personal Info</span>
<span class="bs-stepper-subtitle">Add personal info</span>
</span>
</button>
</div>
<div class="line"></div>
<div class="step" data-target="#social-links-1">
<button type="button" class="step-trigger">
<span class="bs-stepper-circle">3</span>
<span class="bs-stepper-label mt-1">
<span class="bs-stepper-title">Social Links</span>
<span class="bs-stepper-subtitle">Add social links</span>
</span>
</button>
</div>
</div>
<div class="bs-stepper-content">
<form onSubmit="return false">
<!-- Account Details -->
<div id="account-details-1" class="content">
<div class="content-header mb-3">
<h6 class="mb-0">Account Details</h6>
<small>Enter Your Account Details.</small>
</div>
<div class="row g-6">
<div class="col-md-6">
<label class="form-label" for="username-vertical">Username</label>
<input type="text" id="username-vertical" class="form-control" placeholder="johndoe" />
</div>
<div class="col-md-6">
<label class="form-label" for="email-vertical">Email</label>
<input type="email" id="email-vertical" class="form-control" placeholder="john.doe@email.com" aria-label="john.doe" />
</div>
<div class="col-md-6 form-password-toggle">
<label class="form-label" for="password-vertical">Password</label>
<div class="input-group input-group-merge">
<input type="password" id="password-vertical" class="form-control" placeholder="············" aria-describedby="password2-vertical" />
<span class="input-group-text cursor-pointer" id="password2-vertical"><i class="bx bx-hide"></i></span>
</div>
</div>
<div class="col-md-6 form-password-toggle">
<label class="form-label" for="confirm-password-vertical">Confirm Password</label>
<div class="input-group input-group-merge">
<input type="password" id="confirm-password-vertical" class="form-control" placeholder="············" aria-describedby="confirm-password-vertical2" />
<span class="input-group-text cursor-pointer" id="confirm-password-vertical2"><i class="bx bx-hide"></i></span>
</div>
</div>
<div class="col-12 d-flex justify-content-between">
<button class="btn btn-label-secondary btn-prev" disabled> <i class="bx bx-chevron-left bx-sm ms-sm-n2"></i>
<span class="align-middle d-sm-inline-block d-none">Previous</span>
</button>
<button class="btn btn-primary btn-next"> <span class="align-middle d-sm-inline-block d-none me-sm-1 me-0">Next</span> <i class="bx bx-chevron-right bx-sm me-sm-n2"></i></button>
</div>
</div>
</div>
<!-- Personal Info -->
<div id="personal-info-1" class="content">
<div class="content-header mb-3">
<h6 class="mb-0">Personal Info</h6>
<small>Enter Your Personal Info.</small>
</div>
<div class="row g-6">
<div class="col-md-6">
<label class="form-label" for="first-name-vertical">First Name</label>
<input type="text" id="first-name-vertical" class="form-control" placeholder="John" />
</div>
<div class="col-md-6">
<label class="form-label" for="last-name-vertical">Last Name</label>
<input type="text" id="last-name-vertical" class="form-control" placeholder="Doe" />
</div>
<div class="col-md-6">
<label class="form-label" for="country-vertical">Country</label>
<select class="select2" id="country-vertical">
<option label=" "></option>
<option>UK</option>
<option>USA</option>
<option>Spain</option>
<option>France</option>
<option>Italy</option>
<option>Australia</option>
</select>
</div>
<div class="col-md-6">
<label class="form-label" for="language-vertical">Language</label>
<select class="selectpicker w-auto" id="language-vertical" data-style="btn-transparent" data-icon-base="bx" data-tick-icon="bx-check text-white" multiple>
<option>English</option>
<option>French</option>
<option>Spanish</option>
</select>
</div>
<div class="col-12 d-flex justify-content-between">
<button class="btn btn-primary btn-prev"> <i class="bx bx-chevron-left bx-sm ms-sm-n2"></i>
<span class="align-middle d-sm-inline-block d-none">Previous</span>
</button>
<button class="btn btn-primary btn-next"> <span class="align-middle d-sm-inline-block d-none me-sm-1 me-0">Next</span> <i class="bx bx-chevron-right bx-sm me-sm-n2"></i></button>
</div>
</div>
</div>
<!-- Social Links -->
<div id="social-links-1" class="content">
<div class="content-header mb-3">
<h6 class="mb-0">Social Links</h6>
<small>Enter Your Social Links.</small>
</div>
<div class="row g-6">
<div class="col-md-6">
<label class="form-label" for="twitter-vertical">Twitter</label>
<input type="text" id="twitter-vertical" class="form-control" placeholder="https://twitter.com/abc" />
</div>
<div class="col-md-6">
<label class="form-label" for="facebook-vertical">Facebook</label>
<input type="text" id="facebook-vertical" class="form-control" placeholder="https://facebook.com/abc" />
</div>
<div class="col-md-6">
<label class="form-label" for="google-vertical">Google+</label>
<input type="text" id="google-vertical" class="form-control" placeholder="https://plus.google.com/abc" />
</div>
<div class="col-md-6">
<label class="form-label" for="linkedin-vertical">LinkedIn</label>
<input type="text" id="linkedin-vertical" class="form-control" placeholder="https://linkedin.com/abc" />
</div>
<div class="col-12 d-flex justify-content-between">
<button class="btn btn-primary btn-prev"> <i class="bx bx-chevron-left bx-sm ms-sm-n2"></i>
<span class="align-middle d-sm-inline-block d-none">Previous</span>
</button>
<button class="btn btn-success btn-submit">Submit</button>
</div>
</div>
</div>
</form>
</div>
</div>
const wizardVertical = document.querySelector(".wizard-vertical");
if (typeof wizardVertical !== undefined && wizardVertical !== null) {
const wizardVerticalBtnNextList = [].slice.call(wizardVertical.querySelectorAll('.btn-next')),
wizardVerticalBtnPrevList = [].slice.call(wizardVertical.querySelectorAll('.btn-prev')),
wizardVerticalBtnSubmit = wizardVertical.querySelector('.btn-submit');
const numberedVerticalStepper = new Stepper(wizardVertical, {
linear: false
});
if (wizardVerticalBtnNextList) {
wizardVerticalBtnNextList.forEach(wizardVerticalBtnNext => {
wizardVerticalBtnNext.addEventListener('click', event => {
numberedVerticalStepper.next();
});
});
}
if (wizardVerticalBtnPrevList) {
wizardVerticalBtnPrevList.forEach(wizardVerticalBtnPrev => {
wizardVerticalBtnPrev.addEventListener('click', event => {
numberedVerticalStepper.previous();
});
});
}
if (wizardVerticalBtnSubmit) {
wizardVerticalBtnSubmit.addEventListener('click', event => {
alert('Submitted..!!');
});
}
}Use class .wizard-icons to create a wizard with icons. Refer example below for more info.
<div class="bs-stepper wizard-icons wizard-icons-example">
<div class="bs-stepper-header">
<div class="step" data-target="#account-details">
<button type="button" class="step-trigger">
<span class="bs-stepper-icon">
<svg viewBox="0 0 54 54">
<use xlink:href='assets/svg/icons/form-wizard-account.svg#wizardAccount'></use>
</svg>
</span>
<span class="bs-stepper-label">Account Details</span>
</button>
</div>
<div class="line">
<i class="bx bx-chevron-right"></i>
</div>
<div class="step" data-target="#personal-info">
<button type="button" class="step-trigger">
<span class="bs-stepper-icon">
<svg viewBox="0 0 58 54">
<use xlink:href='assets/svg/icons/form-wizard-personal.svg#wizardPersonal'></use>
</svg>
</span>
<span class="bs-stepper-label">Personal Info</span>
</button>
</div>
<div class="line">
<i class="bx bx-chevron-right"></i>
</div>
<div class="step" data-target="#address">
<button type="button" class="step-trigger">
<span class="bs-stepper-icon">
<svg viewBox="0 0 54 54">
<use xlink:href='assets/svg/icons/form-wizard-address.svg#wizardAddress'></use>
</svg>
</span>
<span class="bs-stepper-label">Address</span>
</button>
</div>
<div class="line">
<i class="bx bx-chevron-right"></i>
</div>
<div class="step" data-target="#social-links">
<button type="button" class="step-trigger">
<span class="bs-stepper-icon">
<svg viewBox="0 0 54 54">
<use xlink:href='assets/svg/icons/form-wizard-social-link.svg#wizardSocialLink'></use>
</svg>
</span>
<span class="bs-stepper-label">Social Links</span>
</button>
</div>
<div class="line">
<i class="bx bx-chevron-right"></i>
</div>
<div class="step" data-target="#review-submit">
<button type="button" class="step-trigger">
<span class="bs-stepper-icon">
<svg viewBox="0 0 54 54">
<use xlink:href='assets/svg/icons/form-wizard-submit.svg#wizardSubmit'></use>
</svg>
</span>
<span class="bs-stepper-label">Review & Submit</span>
</button>
</div>
</div>
<div class="bs-stepper-content">
<form onSubmit="return false">
<!-- Account Details -->
<div id="account-details" class="content">
<div class="content-header mb-3">
<h6 class="mb-0">Account Details</h6>
<small>Enter Your Account Details.</small>
</div>
<div class="row g-6">
<div class="col-md-6">
<label class="form-label" for="username-icons">Username</label>
<input type="text" id="username-icons" class="form-control" placeholder="johndoe" />
</div>
<div class="col-md-6">
<label class="form-label" for="email-icons">Email</label>
<input type="email" id="email-icons" class="form-control" placeholder="john.doe@email.com" aria-label="john.doe" />
</div>
<div class="col-md-6 form-password-toggle">
<label class="form-label" for="password-icons">Password</label>
<div class="input-group input-group-merge">
<input type="password" id="password-icons" class="form-control" placeholder="············" aria-describedby="password2" />
<span class="input-group-text cursor-pointer" id="password2"><i class="bx bx-hide"></i></span>
</div>
</div>
<div class="col-md-6 form-password-toggle">
<label class="form-label" for="confirm-password-icon">Confirm Password</label>
<div class="input-group input-group-merge">
<input type="password" id="confirm-password-icon" class="form-control" placeholder="············" aria-describedby="confirm-password2-icon" />
<span class="input-group-text cursor-pointer" id="confirm-password2-icon"><i class="bx bx-hide"></i></span>
</div>
</div>
<div class="col-12 d-flex justify-content-between">
<button class="btn btn-label-secondary btn-prev" disabled> <i class="bx bx-chevron-left bx-sm ms-sm-n2"></i>
<span class="align-middle d-sm-inline-block d-none">Previous</span>
</button>
<button class="btn btn-primary btn-next"> <span class="align-middle d-sm-inline-block d-none">Next</span> <i class="bx bx-chevron-right bx-sm me-sm-n2"></i></button>
</div>
</div>
</div>
<!-- Personal Info -->
<div id="personal-info" class="content">
<div class="content-header mb-3">
<h6 class="mb-0">Personal Info</h6>
<small>Enter Your Personal Info.</small>
</div>
<div class="row g-6">
<div class="col-md-6">
<label class="form-label" for="first-name-icons">First Name</label>
<input type="text" id="first-name-icons" class="form-control" placeholder="John" />
</div>
<div class="col-md-6">
<label class="form-label" for="last-name-icons">Last Name</label>
<input type="text" id="last-name-icons" class="form-control" placeholder="Doe" />
</div>
<div class="col-md-6">
<label class="form-label" for="country-icons">Country</label>
<select class="select2" id="country-icons">
<option label=" "></option>
<option>UK</option>
<option>USA</option>
<option>Spain</option>
<option>France</option>
<option>Italy</option>
<option>Australia</option>
</select>
</div>
<div class="col-md-6">
<label class="form-label" for="language-icons">Language</label>
<select class="selectpicker w-auto" id="language-icons" data-style="btn-transparent" data-icon-base="bx" data-tick-icon="bx-check text-white" multiple>
<option>English</option>
<option>French</option>
<option>Spanish</option>
</select>
</div>
<div class="col-12 d-flex justify-content-between">
<button class="btn btn-primary btn-prev"> <i class="bx bx-chevron-left bx-sm ms-sm-n2"></i>
<span class="align-middle d-sm-inline-block d-none">Previous</span>
</button>
<button class="btn btn-primary btn-next"> <span class="align-middle d-sm-inline-block d-none">Next</span> <i class="bx bx-chevron-right bx-sm me-sm-n2"></i></button>
</div>
</div>
</div>
<!-- Address -->
<div id="address" class="content">
<div class="content-header mb-3">
<h6 class="mb-0">Address</h6>
<small>Enter Your Address.</small>
</div>
<div class="row g-6">
<div class="col-md-6">
<label class="form-label" for="address">Address</label>
<input type="text" class="form-control" id="address" placeholder="98 Borough bridge Road, Birmingham">
</div>
<div class="col-md-6">
<label class="form-label" for="landmark">Landmark</label>
<input type="text" class="form-control" id="landmark" placeholder="Borough bridge">
</div>
<div class="col-md-6">
<label class="form-label" for="pincode">Pincode</label>
<input type="text" class="form-control" id="pincode" placeholder="658921">
</div>
<div class="col-md-6">
<label class="form-label" for="city">City</label>
<input type="text" class="form-control" id="city" placeholder="Birmingham">
</div>
<div class="col-12 d-flex justify-content-between">
<button class="btn btn-primary btn-prev"> <i class="bx bx-chevron-left bx-sm ms-sm-n2"></i>
<span class="align-middle d-sm-inline-block d-none">Previous</span>
</button>
<button class="btn btn-primary btn-next"> <span class="align-middle d-sm-inline-block d-none">Next</span> <i class="bx bx-chevron-right bx-sm me-sm-n2"></i></button>
</div>
</div>
</div>
<!-- Social Links -->
<div id="social-links" class="content">
<div class="content-header mb-3">
<h6 class="mb-0">Social Links</h6>
<small>Enter Your Social Links.</small>
</div>
<div class="row g-6">
<div class="col-md-6">
<label class="form-label" for="twitter-icons">Twitter</label>
<input type="text" id="twitter-icons" class="form-control" placeholder="https://twitter.com/abc" />
</div>
<div class="col-md-6">
<label class="form-label" for="facebook-icons">Facebook</label>
<input type="text" id="facebook-icons" class="form-control" placeholder="https://facebook.com/abc" />
</div>
<div class="col-md-6">
<label class="form-label" for="google-icons">Google+</label>
<input type="text" id="google-icons" class="form-control" placeholder="https://plus.google.com/abc" />
</div>
<div class="col-md-6">
<label class="form-label" for="linkedin-icons">LinkedIn</label>
<input type="text" id="linkedin-icons" class="form-control" placeholder="https://linkedin.com/abc" />
</div>
<div class="col-12 d-flex justify-content-between">
<button class="btn btn-primary btn-prev"> <i class="bx bx-chevron-left bx-sm ms-sm-n2"></i>
<span class="align-middle d-sm-inline-block d-none">Previous</span>
</button>
<button class="btn btn-primary btn-next"> <span class="align-middle d-sm-inline-block d-none">Next</span> <i class="bx bx-chevron-right bx-sm me-sm-n2"></i></button>
</div>
</div>
</div>
<!-- Review -->
<div id="review-submit" class="content">
<p class="fw-medium mb-2">Account</p>
<ul class="list-unstyled">
<li>Username</li>
<li>exampl@email.com</li>
</ul>
<hr>
<p class="fw-medium mb-2">Personal Info</p>
<ul class="list-unstyled">
<li>First Name</li>
<li>Last Name</li>
<li>Country</li>
<li>Language</li>
</ul>
<hr>
<p class="fw-medium mb-2">Address</p>
<ul class="list-unstyled">
<li>Address</li>
<li>Landmark</li>
<li>Pincode</li>
<li>City</li>
</ul>
<hr>
<p class="fw-medium mb-2">Social Links</p>
<ul class="list-unstyled">
<li>https://twitter.com/abc</li>
<li>https://facebook.com/abc</li>
<li>https://plus.google.com/abc</li>
<li>https://linkedin.com/abc</li>
</ul>
<div class="col-12 d-flex justify-content-between">
<button class="btn btn-primary btn-prev"> <i class="bx bx-chevron-left bx-sm ms-sm-n2"></i>
<span class="align-middle d-sm-inline-block d-none">Previous</span>
</button>
<button class="btn btn-success btn-submit">Submit</button>
</div>
</div>
</form>
</div>
</div>
const wizardIcons = document.querySelector('.wizard-icons-example');
if (typeof wizardIcons !== undefined && wizardIcons !== null) {
const wizardIconsBtnNextList = [].slice.call(wizardIcons.querySelectorAll('.btn-next')),
wizardIconsBtnPrevList = [].slice.call(wizardIcons.querySelectorAll('.btn-prev')),
wizardIconsBtnSubmit = wizardIcons.querySelector('.btn-submit');
const iconsStepper = new Stepper(wizardIcons, {
linear: false
});
if (wizardIconsBtnNextList) {
wizardIconsBtnNextList.forEach(wizardIconsBtnNext => {
wizardIconsBtnNext.addEventListener('click', event => {
iconsStepper.next();
});
});
}
if (wizardIconsBtnPrevList) {
wizardIconsBtnPrevList.forEach(wizardIconsBtnPrev => {
wizardIconsBtnPrev.addEventListener('click', event => {
iconsStepper.previous();
});
});
}
if (wizardIconsBtnSubmit) {
wizardIconsBtnSubmit.addEventListener('click', event => {
alert('Submitted..!!');
});
}
}
Horizontal
Use class .wizard-modern to apply modern styles to the wizard.
<div class="bs-stepper wizard-modern wizard-modern-example">
<div class="bs-stepper-header">
<div class="step" data-target="#account-details-modern">
<button type="button" class="step-trigger">
<span class="bs-stepper-circle">1</span>
<span class="bs-stepper-label mt-1">
<span class="bs-stepper-title">Account Details</span>
<span class="bs-stepper-subtitle">Setup Account Details</span>
</span>
</button>
</div>
<div class="line">
<i class="bx bx-chevron-right"></i>
</div>
<div class="step" data-target="#personal-info-modern">
<button type="button" class="step-trigger">
<span class="bs-stepper-circle">2</span>
<span class="bs-stepper-label mt-1">
<span class="bs-stepper-title">Personal Info</span>
<span class="bs-stepper-subtitle">Add personal info</span>
</span>
</button>
</div>
<div class="line">
<i class="bx bx-chevron-right"></i>
</div>
<div class="step" data-target="#social-links-modern">
<button type="button" class="step-trigger">
<span class="bs-stepper-circle">3</span>
<span class="bs-stepper-label mt-1">
<span class="bs-stepper-title">Social Links</span>
<span class="bs-stepper-subtitle">Add social links</span>
</span>
</button>
</div>
</div>
<div class="bs-stepper-content">
<form onSubmit="return false">
<!-- Account Details -->
<div id="account-details-modern" class="content">
<div class="content-header mb-3">
<h6 class="mb-0">Account Details</h6>
<small>Enter Your Account Details.</small>
</div>
<div class="row g-6">
<div class="col-md-6">
<label class="form-label" for="username-modern">Username</label>
<input type="text" id="username-modern" class="form-control" placeholder="johndoe" />
</div>
<div class="col-md-6">
<label class="form-label" for="email-modern">Email</label>
<input type="email" id="email-modern" class="form-control" placeholder="john.doe@email.com" aria-label="john.doe" />
</div>
<div class="col-md-6 form-password-toggle">
<label class="form-label" for="password-modern">Password</label>
<div class="input-group input-group-merge">
<input type="password" id="password-modern" class="form-control" placeholder="············" aria-describedby="password2-modern" />
<span class="input-group-text cursor-pointer" id="password2-modern"><i class="bx bx-hide"></i></span>
</div>
</div>
<div class="col-md-6 form-password-toggle">
<label class="form-label" for="confirm-password-modern">Confirm Password</label>
<div class="input-group input-group-merge">
<input type="password" id="confirm-password-modern" class="form-control" placeholder="············" aria-describedby="confirm-password-modern2" />
<span class="input-group-text cursor-pointer" id="confirm-password-modern2"><i class="bx bx-hide"></i></span>
</div>
</div>
<div class="col-12 d-flex justify-content-between">
<button class="btn btn-label-secondary btn-prev" disabled> <i class="bx bx-chevron-left bx-sm ms-sm-n2"></i>
<span class="align-middle d-sm-inline-block d-none">Previous</span>
</button>
<button class="btn btn-primary btn-next"> <span class="align-middle d-sm-inline-block d-none me-sm-1 me-0">Next</span> <i class="bx bx-chevron-right bx-sm me-sm-n2"></i></button>
</div>
</div>
</div>
<!-- Personal Info -->
<div id="personal-info-modern" class="content">
<div class="content-header mb-3">
<h6 class="mb-0">Personal Info</h6>
<small>Enter Your Personal Info.</small>
</div>
<div class="row g-6">
<div class="col-md-6">
<label class="form-label" for="first-name-modern">First Name</label>
<input type="text" id="first-name-modern" class="form-control" placeholder="John" />
</div>
<div class="col-md-6">
<label class="form-label" for="last-name-modern">Last Name</label>
<input type="text" id="last-name-modern" class="form-control" placeholder="Doe" />
</div>
<div class="col-md-6">
<label class="form-label" for="country-modern">Country</label>
<select class="select2" id="country-modern">
<option label=" "></option>
<option>UK</option>
<option>USA</option>
<option>Spain</option>
<option>France</option>
<option>Italy</option>
<option>Australia</option>
</select>
</div>
<div class="col-md-6">
<label class="form-label" for="language-modern">Language</label>
<select class="selectpicker w-auto" id="language-modern" data-style="btn-transparent" data-icon-base="bx" data-tick-icon="bx-check text-white" multiple>
<option>English</option>
<option>French</option>
<option>Spanish</option>
</select>
</div>
<div class="col-12 d-flex justify-content-between">
<button class="btn btn-primary btn-prev"> <i class="bx bx-chevron-left bx-sm ms-sm-n2"></i>
<span class="align-middle d-sm-inline-block d-none">Previous</span>
</button>
<button class="btn btn-primary btn-next"> <span class="align-middle d-sm-inline-block d-none me-sm-1 me-0">Next</span> <i class="bx bx-chevron-right bx-sm me-sm-n2"></i></button>
</div>
</div>
</div>
<!-- Social Links -->
<div id="social-links-modern" class="content">
<div class="content-header mb-3">
<h6 class="mb-0">Social Links</h6>
<small>Enter Your Social Links.</small>
</div>
<div class="row g-6">
<div class="col-md-6">
<label class="form-label" for="twitter-modern">Twitter</label>
<input type="text" id="twitter-modern" class="form-control" placeholder="https://twitter.com/abc" />
</div>
<div class="col-md-6">
<label class="form-label" for="facebook-modern">Facebook</label>
<input type="text" id="facebook-modern" class="form-control" placeholder="https://facebook.com/abc" />
</div>
<div class="col-md-6">
<label class="form-label" for="google-modern">Google+</label>
<input type="text" id="google-modern" class="form-control" placeholder="https://plus.google.com/abc" />
</div>
<div class="col-md-6">
<label class="form-label" for="linkedin-modern">LinkedIn</label>
<input type="text" id="linkedin-modern" class="form-control" placeholder="https://linkedin.com/abc" />
</div>
<div class="col-12 d-flex justify-content-between">
<button class="btn btn-primary btn-prev"> <i class="bx bx-chevron-left bx-sm ms-sm-n2"></i>
<span class="align-middle d-sm-inline-block d-none">Previous</span>
</button>
<button class="btn btn-success btn-submit">Submit</button>
</div>
</div>
</div>
</form>
</div>
</div>
const wizardModern = document.querySelector('.wizard-modern-example');
if (typeof wizardModern !== undefined && wizardModern !== null) {
const wizardModernBtnNextList = [].slice.call(wizardModern.querySelectorAll('.btn-next')),
wizardModernBtnPrevList = [].slice.call(wizardModern.querySelectorAll('.btn-prev')),
wizardModernBtnSubmit = wizardModern.querySelector('.btn-submit');
const modernStepper = new Stepper(wizardModern, {
linear: false
});
if (wizardModernBtnNextList) {
wizardModernBtnNextList.forEach(wizardModernBtnNext => {
wizardModernBtnNext.addEventListener('click', event => {
modernStepper.next();
});
});
}
if (wizardModernBtnPrevList) {
wizardModernBtnPrevList.forEach(wizardModernBtnPrev => {
wizardModernBtnPrev.addEventListener('click', event => {
modernStepper.previous();
});
});
}
if (wizardModernBtnSubmit) {
wizardModernBtnSubmit.addEventListener('click', event => {
alert('Submitted..!!');
});
}
}Vertical
Use .wizard-modern.vertical to apply modern styles to vertical wizard.
<div class="bs-stepper vertical wizard-modern wizard-modern-vertical">
<div class="bs-stepper-header">
<div class="step" data-target="#account-details-modern-vertical">
<button type="button" class="step-trigger">
<span class="bs-stepper-circle">1</span>
<span class="bs-stepper-label mt-1">
<span class="bs-stepper-title">Account Details</span>
<span class="bs-stepper-subtitle">Setup Account Details</span>
</span>
</button>
</div>
<div class="line"></div>
<div class="step" data-target="#personal-info-modern-vertical">
<button type="button" class="step-trigger">
<span class="bs-stepper-circle">2</span>
<span class="bs-stepper-label mt-1">
<span class="bs-stepper-title">Personal Info</span>
<span class="bs-stepper-subtitle">Add personal info</span>
</span>
</button>
</div>
<div class="line"></div>
<div class="step" data-target="#social-links-modern-vertical">
<button type="button" class="step-trigger">
<span class="bs-stepper-circle">3</span>
<span class="bs-stepper-label mt-1">
<span class="bs-stepper-title">Social Links</span>
<span class="bs-stepper-subtitle">Add social links</span>
</span>
</button>
</div>
</div>
<div class="bs-stepper-content">
<form onSubmit="return false">
<!-- Account Details -->
<div id="account-details-modern-vertical" class="content">
<div class="content-header mb-3">
<h6 class="mb-0">Account Details</h6>
<small>Enter Your Account Details.</small>
</div>
<div class="row g-6">
<div class="col-md-6">
<label class="form-label" for="username-modern-vertical">Username</label>
<input type="text" id="username-modern-vertical" class="form-control" placeholder="johndoe" />
</div>
<div class="col-md-6">
<label class="form-label" for="email-modern-vertical">Email</label>
<input type="email" id="email-modern-vertical" class="form-control" placeholder="john.doe@email.com" aria-label="john.doe" />
</div>
<div class="col-md-6 form-password-toggle">
<label class="form-label" for="password-modern-vertical">Password</label>
<div class="input-group input-group-merge">
<input type="password" id="password-modern-vertical" class="form-control" placeholder="············" aria-describedby="password2-modern-vertical" />
<span class="input-group-text cursor-pointer" id="password2-modern-vertical"><i class="bx bx-hide"></i></span>
</div>
</div>
<div class="col-md-6 form-password-toggle">
<label class="form-label" for="confirm-password-modern-vertical">Confirm Password</label>
<div class="input-group input-group-merge">
<input type="password" id="confirm-password-modern-vertical" class="form-control" placeholder="············" aria-describedby="confirm-password-modern-vertical2" />
<span class="input-group-text cursor-pointer" id="confirm-password-modern-vertical2"><i class="bx bx-hide"></i></span>
</div>
</div>
<div class="col-12 d-flex justify-content-between">
<button class="btn btn-label-secondary btn-prev" disabled> <i class="bx bx-chevron-left bx-sm ms-sm-n2"></i>
<span class="align-middle d-sm-inline-block d-none">Previous</span>
</button>
<button class="btn btn-primary btn-next"> <span class="align-middle d-sm-inline-block d-none me-sm-1 me-0">Next</span> <i class="bx bx-chevron-right bx-sm me-sm-n2"></i></button>
</div>
</div>
</div>
<!-- Personal Info -->
<div id="personal-info-modern-vertical" class="content">
<div class="content-header mb-3">
<h6 class="mb-0">Personal Info</h6>
<small>Enter Your Personal Info.</small>
</div>
<div class="row g-6">
<div class="col-md-6">
<label class="form-label" for="first-name-modern-vertical">First Name</label>
<input type="text" id="first-name-modern-vertical" class="form-control" placeholder="John" />
</div>
<div class="col-md-6">
<label class="form-label" for="last-name-modern-vertical">Last Name</label>
<input type="text" id="last-name-modern-vertical" class="form-control" placeholder="Doe" />
</div>
<div class="col-md-6">
<label class="form-label" for="country-modern-vertical">Country</label>
<select class="select2" id="country-modern-vertical">
<option label=" "></option>
<option>UK</option>
<option>USA</option>
<option>Spain</option>
<option>France</option>
<option>Italy</option>
<option>Australia</option>
</select>
</div>
<div class="col-md-6">
<label class="form-label" for="language-modern-vertical">Language</label>
<select class="selectpicker w-auto" id="language-modern-vertical" data-style="btn-transparent" data-icon-base="bx" data-tick-icon="bx-check text-white" multiple>
<option>English</option>
<option>French</option>
<option>Spanish</option>
</select>
</div>
<div class="col-12 d-flex justify-content-between">
<button class="btn btn-primary btn-prev"> <i class="bx bx-chevron-left bx-sm ms-sm-n2"></i>
<span class="align-middle d-sm-inline-block d-none">Previous</span>
</button>
<button class="btn btn-primary btn-next"> <span class="align-middle d-sm-inline-block d-none me-sm-1 me-0">Next</span> <i class="bx bx-chevron-right bx-sm me-sm-n2"></i></button>
</div>
</div>
</div>
<!-- Social Links -->
<div id="social-links-modern-vertical" class="content">
<div class="content-header mb-3">
<h6 class="mb-0">Social Links</h6>
<small>Enter Your Social Links.</small>
</div>
<div class="row g-6">
<div class="col-md-6">
<label class="form-label" for="twitter-modern-vertical">Twitter</label>
<input type="text" id="twitter-modern-vertical" class="form-control" placeholder="https://twitter.com/abc" />
</div>
<div class="col-md-6">
<label class="form-label" for="facebook-modern-vertical">Facebook</label>
<input type="text" id="facebook-modern-vertical" class="form-control" placeholder="https://facebook.com/abc" />
</div>
<div class="col-md-6">
<label class="form-label" for="google-modern-vertical">Google+</label>
<input type="text" id="google-modern-vertical" class="form-control" placeholder="https://plus.google.com/abc" />
</div>
<div class="col-md-6">
<label class="form-label" for="linkedin-modern-vertical">LinkedIn</label>
<input type="text" id="linkedin-modern-vertical" class="form-control" placeholder="https://linkedin.com/abc" />
</div>
<div class="col-12 d-flex justify-content-between">
<button class="btn btn-primary btn-prev"> <i class="bx bx-chevron-left bx-sm ms-sm-n2"></i>
<span class="align-middle d-sm-inline-block d-none">Previous</span>
</button>
<button class="btn btn-success btn-submit">Submit</button>
</div>
</div>
</div>
</form>
</div>
</div>
const wizardModernVertical = document.querySelector('.wizard-modern-vertical');
if (typeof wizardModernVertical !== undefined && wizardModernVertical !== null) {
const wizardModernVerticalBtnNextList = [].slice.call(wizardModernVertical.querySelectorAll('.btn-next')),
wizardModernVerticalBtnPrevList = [].slice.call(wizardModernVertical.querySelectorAll('.btn-prev')),
wizardModernVerticalBtnSubmit = wizardModernVertical.querySelector('.btn-submit');
const modernVerticalStepper = new Stepper(wizardModernVertical, {
linear: false
});
if (wizardModernVerticalBtnNextList) {
wizardModernVerticalBtnNextList.forEach(wizardModernVerticalBtnNext => {
wizardModernVerticalBtnNext.addEventListener('click', event => {
modernVerticalStepper.next();
});
});
}
if (wizardModernVerticalBtnPrevList) {
wizardModernVerticalBtnPrevList.forEach(wizardModernVerticalBtnPrev => {
wizardModernVerticalBtnPrev.addEventListener('click', event => {
modernVerticalStepper.previous();
});
});
}
if (wizardModernVerticalBtnSubmit) {
wizardModernVerticalBtnSubmit.addEventListener('click', event => {
alert('Submitted..!!');
});
}
}
Sneat use FormValidation for wizard validation. Refer below mentioned example for more info.
<div id="wizard-validation" class="bs-stepper mt-2">
<div class="bs-stepper-header">
<div class="step" data-target="#account-details-validation">
<button type="button" class="step-trigger">
<span class="bs-stepper-circle">1</span>
<span class="bs-stepper-label mt-1">
<span class="bs-stepper-title">Account Details</span>
<span class="bs-stepper-subtitle">Setup Account Details</span>
</span>
</button>
</div>
<div class="line">
<i class="bx bx-chevron-right"></i>
</div>
<div class="step" data-target="#personal-info-validation">
<button type="button" class="step-trigger">
<span class="bs-stepper-circle">2</span>
<span class="bs-stepper-label mt-1">
<span class="bs-stepper-title">Personal Info</span>
<span class="bs-stepper-subtitle">Add personal info</span>
</span>
</button>
</div>
<div class="line">
<i class="bx bx-chevron-right"></i>
</div>
<div class="step" data-target="#social-links-validation">
<button type="button" class="step-trigger">
<span class="bs-stepper-circle">3</span>
<span class="bs-stepper-label mt-1">
<span class="bs-stepper-title">Social Links</span>
<span class="bs-stepper-subtitle">Add social links</span>
</span>
</button>
</div>
</div>
<div class="bs-stepper-content">
<form id="wizard-validation-form" onSubmit="return false">
<!-- Account Details -->
<div id="account-details-validation" class="content">
<div class="content-header mb-3">
<h6 class="mb-0">Account Details</h6>
<small>Enter Your Account Details.</small>
</div>
<div class="row g-6">
<div class="col-sm-6">
<label class="form-label" for="formValidationUsername">Username</label>
<input type="text" name="formValidationUsername" id="formValidationUsername" class="form-control" placeholder="johndoe" />
</div>
<div class="col-sm-6">
<label class="form-label" for="formValidationEmail">Email</label>
<input type="email" name="formValidationEmail" id="formValidationEmail" class="form-control" placeholder="john.doe@email.com" aria-label="john.doe" />
</div>
<div class="col-sm-6 form-password-toggle">
<label class="form-label" for="formValidationPass">Password</label>
<div class="input-group input-group-merge">
<input type="password" id="formValidationPass" name="formValidationPass" class="form-control" placeholder="············" aria-describedby="formValidationPass2" />
<span class="input-group-text cursor-pointer" id="formValidationPass2"><i class="bx bx-hide"></i></span>
</div>
</div>
<div class="col-sm-6 form-password-toggle">
<label class="form-label" for="formValidationConfirmPass">Confirm Password</label>
<div class="input-group input-group-merge">
<input type="password" id="formValidationConfirmPass" name="formValidationConfirmPass" class="form-control" placeholder="············" aria-describedby="formValidationConfirmPass2" />
<span class="input-group-text cursor-pointer" id="formValidationConfirmPass2"><i class="bx bx-hide"></i></span>
</div>
</div>
<div class="col-12 d-flex justify-content-between">
<button class="btn btn-label-secondary btn-prev" disabled>
<i class="bx bx-chevron-left bx-sm ms-sm-n2"></i>
<span class="align-middle d-sm-inline-block d-none">Previous</span>
</button>
<button class="btn btn-primary btn-next">
<span class="align-middle d-sm-inline-block d-none me-sm-1">Next</span>
<i class="bx bx-chevron-right bx-sm me-sm-n2"></i>
</button>
</div>
</div>
</div>
<!-- Personal Info -->
<div id="personal-info-validation" class="content">
<div class="content-header mb-3">
<h6 class="mb-0">Personal Info</h6>
<small>Enter Your Personal Info.</small>
</div>
<div class="row g-6">
<div class="col-sm-6">
<label class="form-label" for="formValidationFirstName">First Name</label>
<input type="text" id="formValidationFirstName" name="formValidationFirstName" class="form-control" placeholder="John" />
</div>
<div class="col-sm-6">
<label class="form-label" for="formValidationLastName">Last Name</label>
<input type="text" id="formValidationLastName" name="formValidationLastName" class="form-control" placeholder="Doe" />
</div>
<div class="col-sm-6">
<label class="form-label" for="formValidationCountry">Country</label>
<select class="select2" id="formValidationCountry" name="formValidationCountry">
<option label=" "></option>
<option>UK</option>
<option>USA</option>
<option>Spain</option>
<option>France</option>
<option>Italy</option>
<option>Australia</option>
</select>
</div>
<div class="col-sm-6">
<label class="form-label" for="formValidationLanguage">Language</label>
<select class="selectpicker w-auto" id="formValidationLanguage" data-style="btn-transparent" data-icon-base="bx" data-tick-icon="bx-check text-white" name="formValidationLanguage" multiple>
<option>English</option>
<option>French</option>
<option>Spanish</option>
</select>
</div>
<div class="col-12 d-flex justify-content-between">
<button class="btn btn-primary btn-prev">
<i class="bx bx-chevron-left bx-sm ms-sm-n2"></i>
<span class="align-middle d-sm-inline-block d-none">Previous</span>
</button>
<button class="btn btn-primary btn-next">
<span class="align-middle d-sm-inline-block d-none me-sm-1">Next</span>
<i class="bx bx-chevron-right bx-sm me-sm-n2"></i>
</button>
</div>
</div>
</div>
<!-- Social Links -->
<div id="social-links-validation" class="content">
<div class="content-header mb-3">
<h6 class="mb-0">Social Links</h6>
<small>Enter Your Social Links.</small>
</div>
<div class="row g-6">
<div class="col-sm-6">
<label class="form-label" for="formValidationTwitter">Twitter</label>
<input type="text" name="formValidationTwitter" id="formValidationTwitter" class="form-control" placeholder="https://twitter.com/abc" />
</div>
<div class="col-sm-6">
<label class="form-label" for="formValidationFacebook">Facebook</label>
<input type="text" name="formValidationFacebook" id="formValidationFacebook" class="form-control" placeholder="https://facebook.com/abc" />
</div>
<div class="col-sm-6">
<label class="form-label" for="formValidationGoogle">Google+</label>
<input type="text" name="formValidationGoogle" id="formValidationGoogle" class="form-control" placeholder="https://plus.google.com/abc" />
</div>
<div class="col-sm-6">
<label class="form-label" for="formValidationLinkedIn">LinkedIn</label>
<input type="text" name="formValidationLinkedIn" id="formValidationLinkedIn" class="form-control" placeholder="https://linkedin.com/abc" />
</div>
<div class="col-12 d-flex justify-content-between">
<button class="btn btn-primary btn-prev">
<i class="bx bx-chevron-left bx-sm ms-sm-n2"></i>
<span class="align-middle d-sm-inline-block d-none">Previous</span>
</button>
<button class="btn btn-success btn-next btn-submit">Submit</button>
</div>
</div>
</div>
</form>
</div>
</div>const select2 = $('.select2'),
selectPicker = $('.selectpicker');
const wizardValidation = document.querySelector('#wizard-validation');
if (typeof wizardValidation !== undefined && wizardValidation !== null) {
// Wizard form
const wizardValidationForm = wizardValidation.querySelector('#wizard-validation-form');
// Wizard steps
const wizardValidationFormStep1 = wizardValidationForm.querySelector('#account-details-validation');
const wizardValidationFormStep2 = wizardValidationForm.querySelector('#personal-info-validation');
const wizardValidationFormStep3 = wizardValidationForm.querySelector('#social-links-validation');
// Wizard next prev button
const wizardValidationNext = [].slice.call(wizardValidationForm.querySelectorAll('.btn-next'));
const wizardValidationPrev = [].slice.call(wizardValidationForm.querySelectorAll('.btn-prev'));
let validationStepper = new Stepper(wizardValidation, {
linear: true
});
// Account details
const FormValidation1 = FormValidation.formValidation(wizardValidationFormStep1, {
fields: {
formValidationUsername: {
validators: {
notEmpty: {
message: 'The name is required'
},
stringLength: {
min: 6,
max: 30,
message: 'The name must be more than 6 and less than 30 characters long'
},
regexp: {
regexp: /^[a-zA-Z0-9 ]+$/,
message: 'The name can only consist of alphabetical, number and space'
}
}
},
formValidationEmail: {
validators: {
notEmpty: {
message: 'The Email is required'
},
emailAddress: {
message: 'The value is not a valid email address'
}
}
},
formValidationPass: {
validators: {
notEmpty: {
message: 'The password is required'
}
}
},
formValidationConfirmPass: {
validators: {
notEmpty: {
message: 'The Confirm Password is required'
},
identical: {
compare: function() {
return wizardValidationFormStep1.querySelector('[name="formValidationPass"]').value;
},
message: 'The password and its confirm are not the same'
}
}
}
},
plugins: {
trigger: new FormValidation.plugins.Trigger(),
bootstrap5: new FormValidation.plugins.Bootstrap5({
// Use this for enabling/changing valid/invalid class
// eleInvalidClass: '',
eleValidClass: ''
}),
autoFocus: new FormValidation.plugins.AutoFocus(),
submitButton: new FormValidation.plugins.SubmitButton()
}
init: instance => {
instance.on('plugins.message.placed', function(e) {
//* Move the error message out of the `input-group` element
if (e.element.parentElement.classList.contains('input-group')) {
e.element.parentElement.insertAdjacentElement('afterend', e.messageElement);
}
});
}
}).on('core.form.valid', function() {
// Jump to the next step when all fields in the current step are valid
validationStepper.next();
});
// Personal info
const FormValidation2 = FormValidation.formValidation(wizardValidationFormStep2, {
fields: {
formValidationFirstName: {
validators: {
notEmpty: {
message: 'The first name is required'
}
}
},
formValidationLastName: {
validators: {
notEmpty: {
message: 'The last name is required'
}
}
},
formValidationCountry: {
validators: {
notEmpty: {
message: 'The Country is required'
}
}
},
formValidationLanguage: {
validators: {
notEmpty: {
message: 'The Languages is required'
}
}
}
},
plugins: {
trigger: new FormValidation.plugins.Trigger(),
bootstrap5: new FormValidation.plugins.Bootstrap5({
// Use this for enabling/changing valid/invalid class
// eleInvalidClass: '',
eleValidClass: ''
}),
autoFocus: new FormValidation.plugins.AutoFocus(),
submitButton: new FormValidation.plugins.SubmitButton()
}
}).on('core.form.valid', function() {
// Jump to the next step when all fields in the current step are valid
validationStepper.next();
});
// Bootstrap Select (i.e Language select)
if (selectPicker.length) {
selectPicker.each(function() {
var $this = $(this);
$this.selectpicker().on('change', function() {
FormValidation2.revalidateField('formValidationLanguage');
});
});
}
// Select 2 (i.e Country select)
if (select2.length) {
select2
.select2({
placeholder: 'Select an country'
})
.on('change.select2', function() {
// Revalidate the color field when an option is chosen
FormValidation2.revalidateField('formValidationCountry');
});
}
// Social links
const FormValidation3 = FormValidation.formValidation(wizardValidationFormStep3, {
fields: {
formValidationTwitter: {
validators: {
notEmpty: {
message: 'The Twitter URL is required'
},
uri: {
message: 'The URL is not proper'
}
}
},
formValidationFacebook: {
validators: {
notEmpty: {
message: 'The Facebook URL is required'
},
uri: {
message: 'The URL is not proper'
}
}
},
formValidationGoogle: {
validators: {
notEmpty: {
message: 'The Google URL is required'
},
uri: {
message: 'The URL is not proper'
}
}
},
formValidationLinkedIn: {
validators: {
notEmpty: {
message: 'The LinkedIn URL is required'
},
uri: {
message: 'The URL is not proper'
}
}
}
},
plugins: {
trigger: new FormValidation.plugins.Trigger(),
bootstrap5: new FormValidation.plugins.Bootstrap5({
// Use this for enabling/changing valid/invalid class
// eleInvalidClass: '',
eleValidClass: ''
}),
autoFocus: new FormValidation.plugins.AutoFocus(),
submitButton: new FormValidation.plugins.SubmitButton()
}
}).on('core.form.valid', function() {
// You can submit the form
// wizardValidationForm.submit()
// or send the form data to server via an Ajax request
// To make the demo simple, I just placed an alert
alert('Submitted..!!');
});
wizardValidationNext.forEach(item => {
item.addEventListener('click', event => {
// When click the Next button, we will validate the current step
switch (validationStepper._currentIndex) {
case 0:
FormValidation1.validate();
break;
case 1:
FormValidation2.validate();
break;
case 2:
FormValidation3.validate();
break;
default:
break;
}
});
});
wizardValidationPrev.forEach(item => {
item.addEventListener('click', event => {
switch (validationStepper._currentIndex) {
case 2:
validationStepper.previous();
break;
case 1:
validationStepper.previous();
break;
case 0:
default:
break;
}
});
});
}We have created useful examples form wizard by keeping UX in mind. Sneat provides three advanced form wizard examples which you can use in a real-life application. Advanced form wizard use BS Stepper, Custom inputs, Select2, Bootstrap Select, CleaveJS and Formvalidation.