• Home
  • PHP
  • MySQL
  • Laravel
  • Demos
  • HTML
  • jQuery
  • Framework
  • Request Tutorial
PHP Lift
  • Home
  • Demos
  • Advertisement
PHP Lift
  • Home
  • PHP
  • MySQL
  • Laravel
  • Demos
  • HTML
  • jQuery
  • Framework
  • Request Tutorial
  • Follow
    • Facebook
    • Twitter
    • Google+
    • Pinterest
    • Youtube
    • Instagram
    • RSS
Create Bootstrap form wizard and validation with jQuery
Home
Bootstrap

Create Bootstrap form wizard and validation with jQuery

June 15th, 2025 Huzoor Bux Bootstrap, Designing, jQuery 0 comments

Facebook Twitter Google+ LinkedIn Pinterest

In this tutorial, I will show you how to create form wizard and validation in jQuery, its a simple snippet created with Bootstrap and jquery to make a simple long from in steps to improve data collection process and beautify webpage.

DEMO
DOWNLOAD CODE

In this tutorial I have used jQuery and Bootstrap.

First of all include your libraries:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Above libraries required to run this snippet.

Basic HTML form with steps:

We created 3 steps of our firm step tabs setup like this

            <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>Account Details</p>

                    </div>

                    

                    <div class="stepwizard-step">

                        <a href="#step-2" type="button" class="btn btn-default btn-circle" disabled="disabled">2</a>

                        <p>Career</p>

                    </div>

                    

                    <div class="stepwizard-step">

                        <a href="#step-3" type="button" class="btn btn-default btn-circle" disabled="disabled">3</a>

                        <p>Social Media</p>

                    </div>

                    

                </div>

            </div>

Above HTML create 3 steps tab above the form like this.

This HTML contain form elements in each step:

               <div class="row setup-content" id="step-1">

                    <div class="col-xs-12">

                        <div class="col-md-12">

                            <h3> Account Details</h3>

                            <!-- content go here -->

                            <button class="btn btn-light btn-block nextBtn 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> Career</h3>

                            <!-- content go here -->

                            <button class="btn btn-light btn-block nextBtn 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> Social Media</h3>

                            <!-- content go here -->

                            <button class="btn btn-light nextBtn btn-block pull-right" type="submit">Finish!</button>

                        </div>

                    </div>

               </div>





Jquery used to enable navigation and validation of form:

<script type="text/javascript">

$(document).ready(function () {

    var navListItems = $('div.setup-panel div a'), // tab nav items

            allWells = $('.setup-content'), // content div

            allNextBtn = $('.nextBtn'); // next button



    allWells.hide(); // hide all contents by defauld



    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();

        }

    });

    // next button

    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='email'],input[type='password'],input[type='url']"),

            isValid = true;

           // Validation

        $(".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");

            }

        }

        // move to next step if valid

        if (isValid)

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

    });



    $('div.setup-panel div a.btn-primary').trigger('click');

});

</script>

Some CSS to organize form step tabs:

<style type="text/css">

.form-control {

    height: 37px;

}

.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;

}

</style>

That’s all I hope you like it a complete Demo and source code for download available with this tutorial.

If you face any difficulty please feel free to comment below we love to help you. If you have any feedback suggestion then please inform us by commenting.

Share this:

  • Click to share on X (Opens in new window) X
  • Click to share on Facebook (Opens in new window) Facebook

Related

Facebook Twitter Google+ LinkedIn Pinterest
Next article Examining variable types in PHP
Previous article Const vs. Let vs. Var in Javascript. Which one should you use?

Huzoor Bux

I am a PHP Developer

Related Posts

How to Migrate from Bootstrap 4 to Bootstrap 5 Bootstrap
June 17th, 2025

How to Migrate from Bootstrap 4 to Bootstrap 5

How to integrate jQuery FullCalendar with PHP & MySQL Example Bootstrap
June 17th, 2025

How to integrate jQuery FullCalendar with PHP & MySQL Example

Create fly to cart / basket effect for eCommerce using jQuery and CSS CSS
June 17th, 2025

Create fly to cart / basket effect for eCommerce using jQuery and CSS

Leave a Reply Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Subscribe
Get new posts by email:
Powered by follow.it
Advertisement
Like us
Recent Posts
  • 9 Best Programming languages you should learn in 2021
  • What is Progressive Web Applications and Why Create a PWA?
  • 7 HTML attributes that you must learn today!
  • Why Use MongoDB and When to Use It?
  • Introduction to Git for version control
Categories
  • API
  • Bootstrap
  • Bot
  • CSS
  • CSS 3
  • Database
  • Designing
  • Framework
  • Guide
  • HTML
  • HTML 5
  • JavaScript
  • jQuery
  • Laravel
  • MySQL
  • Node.js
  • oAuth
  • Payment
  • PHP
  • Python
  • Social
  • Tips
  • Web 3.0
  • WordPress
Weekly Tags
  • PHP
  • How to
  • javascript
  • laravel
  • MYSQL
  • PHP framework
  • css
  • jQuery
  • HTML to PDF
  • Web Development
  • About
  • Privacy Policy
  • Back to top
© PHPLift.net. All rights reserved.
 

Loading Comments...