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

<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> </div> </div> <div class="row setup-content" id="step-2"> <div class="col-xs-12"> <div class="col-md-12"> <h3> Step 2</h3> <div class="form-group"> <label class="control-label">Company Name</label> <input maxlength="200" type="text" required="required" class="form-control" placeholder="Enter Company Name" /> </div> <div class="form-group"> <label class="control-label">Company Address</label> <input maxlength="200" type="text" required="required" class="form-control" placeholder="Enter Company Address" /> </div> <button class="btn btn-primary nextBtn btn-lg pull-right" type="button" >Next</button> </div> </div> </div> <div class="row setup-content" id="step-3"> <div class="col-xs-12"> <div class="col-md-12"> <h3> Step 3</h3> <button class="btn btn-success btn-lg pull-right" type="submit">Finish!</button> </div> </div> </div> </form> </div>
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; text-align: center; position: relative; } .btn-circle { width: 30px; height: 30px; text-align: center; padding: 6px 0; font-size: 12px; line-height: 1.428571429; border-radius: 15px; }
$(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"); } } if (isValid) nextStepWizard.removeAttr('disabled').trigger('click'); }); $('div.setup-panel div a.btn-primary').trigger('click'); });

Related: See More


Questions / Comments:

how to validate a drop down ?

Sandeep () - 6 years ago - Reply 0


how to validate email?

Raheel () - 7 years ago - Reply 0


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

vedavyasa () - 7 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 () - 7 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 () - 6 years ago - Reply 0


This really needs a back button

mark () - 9 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');

});

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


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

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


How to reset this form?

k () - 6 years ago - Reply -1


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

nuthakkianuradha () - 3 years ago - Reply 0


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

neftalicoasta () - 4 years ago - Reply 0


Very good but how to validate radio button

johnef () - 4 years ago - Reply 0


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

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


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

Alice () - 8 years ago - Reply 0


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

Juan () - 8 years ago - Reply 0


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

john () - 8 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 () - 9 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 () - 9 years ago - Reply 0


Any chance for a back button?

alex () - 9 years ago - Reply 0


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

Vijay Dhanvai () - 9 years ago - Reply 0