No Description Available
Step by step bootstrap form
2072 22 November 2019
Abhishek Singh
~ onex1
Step by step form is smart way to collect data, where we collect data from user in steps.
No Description Available
1
Step by step form is smart way to collect data, where we collect data from user in steps.
let status = $(".status");
let prog = $(".progress-bar");
let steps = $(".step:not(.step.end)");
let proceed;
$(".next").click(function(e) {
e.preventDefault();
$(".prev")
.show()
.prop("disabled", false);
$.each(steps, (i, e) => {
if ($(e).css("display") == "block") {
if ($(e).attr("validation") == "true") {
validate(e);
}
if (proceed) {
$(e)
.hide()
.next()
.fadeIn()
.removeClass("d-none");
progress(e);
if ($(e).index() == steps.length) {
$(this).hide();
$(".prev").hide();
}
return false;
}
}
});
});
$(".prev").click(function(e) {
e.preventDefault();
$(".next")
.show()
.prop("disabled", false);
$.each(steps, (i, e) => {
if ($(e).css("display") == "block") {
$(e)
.hide()
.prev()
.fadeIn()
.removeClass("d-none");
console.log(
$(e)
.prev()
.prev()
);
console.log($(e));
progress(
$(e)
.prev()
.prev()
);
if ($(e).index() - 1 == 1) {
$(this).prop("disabled", true);
}
return false;
}
});
});
const progress = e => {
let pos = (parseInt($(e).index()) / steps.length) * 100;
if($(e).index() == 1){
prog.parent().show();
}
if (pos == 100) {
prog.addClass("bg-success");
}
prog
.attr("valuenow", pos)
.css("width", pos + "%");
};
const validate = step => {
let inputs = step.querySelectorAll(".validate");
proceed = true;
let regex = {
string: /^[a-zA-Z ]{2,30}$/,
email: /^\[email protected][a-zA-Z_]+?\.[a-zA-Z]{2,3}$/,
mobile: /^[0-9]{10,12}$/,
notEmpty: /^(?!\s*$).+/,
};
$.each(inputs, (i, input) => {
let type = ($(input).attr("type") == undefined || $(input).attr("type") == 'checkbox') ? false : true;
if (input.value == "") {
show_error(input, "Feild is Required");
proceed = false;
}else if (type &&
!regex[
($(input).attr("data-validate") == undefined)
? "notEmpty"
: $(input).attr("data-validate")
].test(input.value)
) {
//alert($(input).attr("type"))
show_error(input, `Enter a valid ${$(input).attr("name")}`);
proceed = false;
} else if ($(input).attr("type") == "checkbox") {
} else if(proceed && inputs.length == i-1) {
proceed = true;
}
});
};
function show_error(input, msg) {
let ind = $(input).attr('name');
if($('#err'+ind).length > 0){
$('#err'+ind).html(msg)
}else{
$(input).after(
'<div id="err'+ind+'" class="alert alert-danger mt-2 alert-sm">' + msg + "</div>"
);
}
}
<section>
<div class="container">
<div class="row">
<div class="col-md-4 col-xs-12 mx">
<div class="adp-block mt-5 mb-5">
<form>
<div class="progress mt-2 mb-2" style="display:none">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%"></div>
</div>
<div class="step" validation="true">
<p class='status'>Enter Mandatory Info</p>
<div class="form-group">
<label>Full Name</label>
<input type="text" class="form-control validate" name="full_name" data-validate="string">
</div>
<div class="form-group">
<label>Email </label>
<input type="email" name="email" class="form-control validate" data-validate="email">
</div><div class="form-group">
<label>Mobile</label>
<input type="mobile" class="form-control validate" name="mobile" data-validate="mobile">
</div>
</div>
<div class="step d-none" validation="true">
<p class='status'>Personal Info</p>
<div class="form-group">
<label>Gender</label>
<select class="form-control validate" data-validate="notEmpty">
<option value="" class="form-control">---</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
<div class="form-group">
<label>Skills </label>
<p class="checkbox"></p>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="skills" value="ruby" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">
Ruby
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="skills" value="nodejs" id="defaultCheck2">
<label class="form-check-label" for="defaultCheck2">
Node js
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="skills" value="python" id="defaultCheck3">
<label class="form-check-label" for="defaultCheck3">
Python
</label>
</div>
<div class="form-check">
<input class="form-check-input" name="skills" type="checkbox" value="php" id="defaultCheck4">
<label class="form-check-label" for="defaultCheck4">
PHP
</label>
</div>
</div>
</div>
<div class="step d-none" validation="true">
<div class="form-group">
<label>Company Name</label>
<input type="text" class="form-control validate" name="company" data-validate="string" required>
</div>
<div class="form-group">
<label>Company Email </label>
<input type="email" name="company_email" class="form-control validate">
</div><div class="form-group">
<label>Company Mobile</label>
<input type="mobile" class="form-control validate" name="company_mobile">
</div>
</div>
<div class="step end d-none">
<div class="card-body text-center">
<i class="fas fa-check fa-2x text-success"></i>
<h4 class="card-title">Thank Tou For Registring with Us</h4>
<p class="card-text"
> Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<button class="btn btn-success btn-sm">Go to Home</button>
</div>
</div>
<div>
<button class="btn btn-primary prev" disabled>Back</button>
<button class="btn btn-primary next float-right">Next</button>
<input type="submit" class="btn btn-success btn-block d-none">
</div>
</form>
</div>
</div>
</div>
</div>
</section>