Step by step tab style form validation Wizard using Bootstrap | 2my4edge

25 December 2014

Step by step tab style form validation Wizard using Bootstrap

Today i'm going to post about step by step form wizard with validation using bootstrap, it is like tab style form with validation, this will not allow second tab until you fill the first form, here we are going to do this with bootstrap, let see the coding of it.

step-by-step-form-validation-in-tab-with-bootstrap
DOWNLOAD                     LIVE DEMO


HTML CODE
<div class="container">
  
<div class="stepwizard col-md-offset-3">
    <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" action="" method="post">
    <div class="row setup-content" id="step-1">
      <div class="col-xs-6 col-md-offset-3">
        <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>
          <div class="form-group">
            <label class="control-label">Address</label>
            <textarea required="required" class="form-control" placeholder="Enter your address" ></textarea>
          </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-6 col-md-offset-3">
        <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-6 col-md-offset-3">
        <div class="col-md-12">
          <h3> Step 3</h3>
          <button class="btn btn-success btn-lg pull-right" type="submit">Submit</button>
        </div>
      </div>
    </div>
  </form>
  
</div>
you can add more tab here as you need, in the stepwizard-step with  href="#step-1"  you can add more number with href="#step-4" like that, and the <div class="row setup-content" id="step-3" id and the href id value should be same, then only it will work.

CSS
<style type="text/css">
body {
    margin-top:40px;
}
.stepwizard-step p {
    margin-top: 10px;
}
.stepwizard-row {
    display: table-row;
}
.stepwizard {
    display: table;
    width: 50%;
    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;
}
</style>
you can customize the code as you need, and this form wizard need bootstrap file with jquery.

CSS & JQUERY
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
  $(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');
});
  </script>
you can add input type over there for your validation, the above jquery, bootsrap and script is needed. i hope this post is really useful to you, thank you..


RELATED POSTS :





28 comments:

  1. wow..
    it's really cool...
    thanx for sharing...

    ReplyDelete
  2. awesome! could you perhaps help with creating a back button

    ReplyDelete
  3. I've added back button functionality, you can see it here: http://www.bootply.com/bbzQzrj0lb

    ReplyDelete
    Replies
    1. I need this back button, thanks for doing this :)

      Delete
    2. Hi Branson, Using your example how do I validate a field with response msg?
      i.e. email address validation with either msg beside input to output error msg or popup.
      Thanks

      Delete
    3. Hi Jared, Using your example how do I validate a field with response msg?
      i.e. email address validation with either msg beside input to output error msg or popup.
      Thanks

      Delete
  4. I've added back button functionality, you can see it here: http://www.bootply.com/bbzQzrj0lb

    ReplyDelete
    Replies
    1. i need last step as the review of all filled forms before..please share me link

      Delete
    2. i need last step as the review of all filled forms before..please share me link

      Delete
  5. Wow Cool !!! Thanks & Jared McMorris Thanks for your back button....

    ReplyDelete
  6. how to validate a checkbox? Can you show me an example please?

    ReplyDelete
  7. it's really cool!! What I've to do to align left the content? Now it's central. Thank you!!

    ReplyDelete
  8. How i can validate a textarea field? i include required="required" to textarea but dont work

    ReplyDelete
  9. How to validate the required field on the next button.because it only works for two textfields

    ReplyDelete
  10. If i want to display the step 2 when the page loads, then how???

    ReplyDelete
  11. As an FYI, if you're using a more recent version of Bootstrap, you'll need to makeup for this update:
    https://github.com/twbs/bootstrap/commit/c26ffd4

    by adding adding this CSS rule:
    div.setup-panel div a{
    pointer-events: none;
    }

    Otherwise, the steps will be clickable.

    ReplyDelete
  12. Hi,

    How can I use "required" for following in MVC


    @Html.DropDownListFor(m => m.Type, new SelectList(Model.TypeList), "Select", new { @class = "form-control"})

    @Html.ValidationMessageFor(m => m.Type, null, new { @class = "text-danger" })




    Thanks.

    ReplyDelete
  13. how to submit form ?

    ReplyDelete
  14. This script not worked in Mozilla. Please help me to solve it

    ReplyDelete
  15. pls tell me how to validate Step by step tab style form validation Wizard without using required in input type

    ReplyDelete
  16. pls tell me how to validate Step by step tab style form validation Wizard without using required in input type

    ReplyDelete
  17. Can we have the coloring scheme for the step btn-circle.. depending on the input fields. i.e, Green color for step 1, when step 1 is completed..

    ReplyDelete
  18. how to ad more validation rules?

    ReplyDelete
  19. i added the same code but when i click on numbers on top its navigating to the next step (without filling the form). how to resolve this ?

    ReplyDelete
  20. Thanks for de "back" buttom. For submit the form i add this buttom
    button class="btn btn-success btn-lg pull-right" type="submit">Finish!. Submit

    for validation you have to add this code to the form declaration

    ... role="form" data-toggle="validator">
    ...


    more info on http://1000hz.github.io/bootstrap-validator/

    ReplyDelete
  21. Great tutorial...but I've been having problem with processing the form in php. I'd appreciate if you can help out

    ReplyDelete

^