"Form Wizard and validation"
Bootstrap 3.1.0 Snippet by omri-shaiko

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="stepwizard">
<div class="stepwizard-row setup-panel">
<div class="stepwizard-step">
<a href="#step-1" type="button" class="btn btn-primary btn-circle">1</a>
<p>Step 1</p>
</div>
<div class="stepwizard-step">
<a href="#step-2" type="button" class="btn btn-default btn-circle" disabled="disabled">2</a>
<p>Step 2</p>
</div>
<div class="stepwizard-step">
<a href="#step-3" type="button" class="btn btn-default btn-circle" disabled="disabled">3</a>
<p>Step 3</p>
</div>
</div>
</div>
<form role="form">
<div class="row setup-content" id="step-1">
<div class="col-xs-12">
<div class="col-md-12">
<h3> Step 1</h3>
<div class="form-group">
<label class="control-label">First Name</label>
<input maxlength="100" type="text" required="required" class="form-control" placeholder="Enter First Name" />
</div>
<div class="form-group">
<label class="control-label">Last Name</label>
<input maxlength="100" type="text" required="required" class="form-control" placeholder="Enter Last Name" />
</div>
<button class="btn btn-primary nextBtn btn-lg pull-right" type="button" >Next</button>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
body{
margin-top:40px;
}
.stepwizard-step p {
margin-top: 10px;
}
.stepwizard-row {
display: table-row;
}
.stepwizard {
display: table;
width: 100%;
position: relative;
}
.stepwizard-step button[disabled] {
opacity: 1 !important;
filter: alpha(opacity=100) !important;
}
.stepwizard-row:before {
top: 14px;
bottom: 0;
position: absolute;
content: " ";
width: 100%;
height: 1px;
background-color: #ccc;
z-order: 0;
}
.stepwizard-step {
display: table-cell;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(document).ready(function () {
var navListItems = $('div.setup-panel div a'),
allWells = $('.setup-content'),
allNextBtn = $('.nextBtn');
allWells.hide();
navListItems.click(function (e) {
e.preventDefault();
var $target = $($(this).attr('href')),
$item = $(this);
if (!$item.hasClass('disabled')) {
navListItems.removeClass('btn-primary').addClass('btn-default');
$item.addClass('btn-primary');
allWells.hide();
$target.show();
$target.find('input:eq(0)').focus();
}
});
allNextBtn.click(function(){
var curStep = $(this).closest(".setup-content"),
curStepBtn = curStep.attr("id"),
nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"),
curInputs = curStep.find("input[type='text'],input[type='url']"),
isValid = true;
$(".form-group").removeClass("has-error");
for(var i=0; i<curInputs.length; i++){
if (!curInputs[i].validity.valid){
isValid = false;
$(curInputs[i]).closest(".form-group").addClass("has-error");
}
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Black Dashboard
login-form
Login Form
Contact Form

Questions / Comments:

how to validate a drop down ?

Sandeep () - 7 years ago - Reply 0

how to validate email?

Raheel () - 8 years ago - Reply 0

how to validate a dropdown? since it doesn't has input tag.

vedavyasa () - 8 years ago - Reply 0

just simply add the word select on curInputs of the allNextBtn.click function:

example:

allNextBtn.click(function(){
var curStep = $(this).closest(".setup-content"),
curStepBtn = curStep.attr("id"),
nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"),
curInputs = curStep.find("input[type='text'],input[type='url'],select"),
isValid = true;

$(".form-group").removeClass("has-error");
for(var i=0; i<curinputs.length; i++){="" if="" (!curinputs[i].validity.valid){="" isvalid="false;" $(curinputs[i]).closest(".form-group").addclass("has-error");="" }="" }="" if="" (isvalid)="" nextstepwizard.removeattr('disabled').trigger('click');="" });="">

Elwyn Elayda () - 8 years ago - Reply 0

That doesn't work on its own. You need to also replace this
if=(!curinputs[i].validity.valid)
with
if (!curInputs[i].validity.valid || curInputs[i].selectedIndex == 0 )
That tests if the dropdown is blank

Philip van den Heever () - 7 years ago - Reply 0

This really needs a back button

mark () - 10 years ago - Reply 0

for PrevButton

----

add var allPrevBtn = $('.prevBtn');

and this

allPrevBtn.click(function(){

var curStep = $(this).closest(".setup-content"),

curStepBtn = curStep.attr("id"),

prevStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().prev().children("a");

prevStepWizard.removeAttr('disabled').trigger('click');

});

Юра () - 10 years ago - Reply 0

Could someone help me incorporate a previous button on this? It would help quite a bit

Muhammad Tareen () - 7 years ago - Reply -1

How to reset this form?

k () - 7 years ago - Reply -1

Does this work on bootstrap 5? Its not working for me

nuthakkianuradha () - 4 years ago - Reply 0

does not work for html5 validations with pattern Can you help me? Thank you.

neftalicoasta () - 5 years ago - Reply 0

Very good but how to validate radio button

johnef () - 5 years ago - Reply 0

how to make this form stay in div #step-3 after refresh/post

T. Aditya Maulana () - 7 years ago - Reply 0

It gets an error in IE9!
In line 31 var curInputs can't be recognized...
Any solution?

Alice () - 9 years ago - Reply 0

How could I remove the error message: "please fill out this field" when I press the enter key?

Juan () - 9 years ago - Reply 0

i'm getting the step buttons vertically.. what would be the problem???

john () - 9 years ago - Reply 0

how do i prevent the "<" symbol from being replaced by "& lt;" in the javascript so that the sections do not all appear on 1 page?

Mike () - 10 years ago - Reply 0

i can't find the way to make a button go to a particular step (in a different file). is that possible? any ideas? thanks !

Guayaba Mellado () - 10 years ago - Reply 0

Any chance for a back button?

alex () - 10 years ago - Reply 0

yes its very nice and time saving for me.
great :)

Vijay Dhanvai () - 10 years ago - Reply 0