Using Jquery Validate in conjunction with Form Wizard

Question

Using Jquery Validate in conjunction with Form Wizard

Navigation

#1 by (2 votes)

1

I'm putting together a step-by-step form. I did a test a Validate in the email field and, the verification of the email worked, however, the Validate will not go to the next step if the field is blank.

Follow what I've done so far.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Steps</title>

<style type="text/css">
.wizard {
margin: 20px auto;
background: #fff;
}

.wizard .nav-tabs {
    position: relative;
    margin: 40px auto;
    margin-bottom: 0;
    border-bottom-color: #e0e0e0;
}

.wizard > div.wizard-inner {
    position: relative;
}

.connecting-line {
height: 2px;
background: #e0e0e0;
position: absolute;
width: 80%;
margin: 0 auto;
left: 0;
right: 0;
top: 50%;
z-index: 1;
}

.wizard .nav-tabs > li.active > a, .wizard .nav-tabs > li.active > a:hover, .wizard .nav-tabs > li.active > a:focus {
color: #555555;
cursor: default;
border: 0;
border-bottom-color: transparent;
}

span.round-tab {
width: 70px;
height: 70px;
line-height: 70px;
display: inline-block;
border-radius: 100px;
background: #fff;
border: 2px solid #e0e0e0;
z-index: 2;
position: absolute;
left: 0;
text-align: center;
font-size: 25px;
}
span.round-tab i{
color:#555555;
}
.wizard li.active span.round-tab {
background: #fff;
border: 2px solid #5bc0de;

}
.wizard li.active span.round-tab i{
color: #5bc0de;
}

span.round-tab:hover {
color: #333;
border: 2px solid #333;
}

.wizard .nav-tabs > li {
width: 25%;
}

.wizard li:after {
content: " ";
position: absolute;
left: 46%;
opacity: 0;
margin: 0 auto;
bottom: 0px;
border: 5px solid transparent;
border-bottom-color: #5bc0de;
transition: 0.1s ease-in-out;
}

.wizard li.active:after {
content: " ";
position: absolute;
left: 46%;
opacity: 1;
margin: 0 auto;
bottom: 0px;
border: 10px solid transparent;
border-bottom-color: #5bc0de;
}

.wizard .nav-tabs > li a {
width: 70px;
height: 70px;
margin: 20px auto;
border-radius: 100%;
padding: 0;
}

.wizard .nav-tabs > li a:hover {
    background: transparent;
}

.wizard .tab-pane {
position: relative;
padding-top: 50px;
}

.wizard h3 {
margin-top: 0;
}
.step1 .row {
margin-bottom:10px;
}
.step_21 {
border :1px solid #eee;
border-radius:5px;
padding:10px;
}
.step33 {
border:1px solid #ccc;
border-radius:5px;
padding-left:10px;
margin-bottom:10px;
}
.dropselectsec {
width: 68%;
padding: 6px 5px;
border: 1px solid #ccc;
border-radius: 3px;
color: #333;
margin-left: 10px;
outline: none;
font-weight: normal;
}
.dropselectsec1 {
width: 74%;
padding: 6px 5px;
border: 1px solid #ccc;
border-radius: 3px;
color: #333;
margin-left: 10px;
outline: none;
font-weight: normal;
}
.mar_ned {
margin-bottom:10px;
}
.wdth {
width:25%;
}
.birthdrop {
padding: 6px 5px;
border: 1px solid #ccc;
border-radius: 3px;
color: #333;
margin-left: 10px;
width: 16%;
outline: 0;
font-weight: normal;
}


/* according menu */
#accordion-container {
font-size:13px
}
.accordion-header {
font-size:13px;
background:#ebebeb;
margin:5px 0 0;
padding:7px 20px;
cursor:pointer;
color:#fff;
font-weight:400;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px
}
.unselect_img{
width:18px;
-webkit-user-select: none;  
-moz-user-select: none;     
-ms-user-select: none;      
user-select: none; 
}
.active-header {
-moz-border-radius:5px 5px 0 0;
-webkit-border-radius:5px 5px 0 0;
border-radius:5px 5px 0 0;
background:#F53B27;
}
.active-header:after {
content:"\f068";
font-family:'FontAwesome';
float:right;
margin:5px;
font-weight:400
}
.inactive-header {
background:#333;
}
.inactive-header:after {
content:"\f067";
font-family:'FontAwesome';
float:right;
margin:4px 5px;
font-weight:400
}
.accordion-content {
display:none;
padding:20px;
background:#fff;
border:1px solid #ccc;
border-top:0;
-moz-border-radius:0 0 5px 5px;
-webkit-border-radius:0 0 5px 5px;
border-radius:0 0 5px 5px
}
.accordion-content a{
text-decoration:none;
color:#333;
}
.accordion-content td{
border-bottom:1px solid #dcdcdc;
}



@media( max-width : 585px ) {

.wizard {
    width: 90%;
    height: auto !important;
}

span.round-tab {
    font-size: 16px;
    width: 50px;
    height: 50px;
    line-height: 50px;
}

.wizard .nav-tabs > li a {
    width: 50px;
    height: 50px;
    line-height: 50px;
}

.wizard li.active:after {
    content: " ";
    position: absolute;
    left: 35%;
}
}
</style>

<!-- Jquery -->
<script type="text/javascript" src="https://www.agenciamove.com.br/js/jquery-1.11.2.min.js"></script><!--Boostrap--><linktype="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css"> 
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script><scripttype="text/javascript" src="https://www.agenciamove.com.br/js/validate.min.js"></script><scripttype="text/javascript">
	$(document).ready(function () {
		//Initialize tooltips
		$('.nav-tabs > li a[title]').tooltip();
		
		//Wizard
		$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {

			var $target = $(e.target);
		
			if ($target.parent().hasClass('disabled')) {
				return false;
			}
		});

		$(".next-step").click(function (e) {

			var $active = $('.wizard .nav-tabs li.active');
			$active.next().removeClass('disabled');
			nextTab($active);

		});
		$(".prev-step").click(function (e) {

			var $active = $('.wizard .nav-tabs li.active');
			prevTab($active);

		});
	});

	function nextTab(elem) {
		$(elem).next().find('a[data-toggle="tab"]').click();
	}
	function prevTab(elem) {
		$(elem).prev().find('a[data-toggle="tab"]').click();
	}
	
	
	


	
	
	
            $().ready(function() {
        
                $("#form_contato").validate({
                    rules: {
                
                    email: {required: true, email: true},
                    /* email: {required: true, email: true},
                    telefone: "required",
                    cidade: "required",
                    mensagem: "required" */
            
                },
            
                messages: {
        
                    email: {required: "Informe o e-mail", email: "Informe um e-mail válido"}
                    /* email: {required: "Informe o e-mail", email: "Informe um e-mail válido"},
                    telefone: "Informe o telefone",
                    cidade: "Selecione o estado primeiro",
                    mensagem: "Envie uma mensagem" */
            
                }
        
                });
            
            });	
</script>

</head>
<body>

<div class="container">
    <div class="row">
    	<section>
        <div class="wizard">
            <div class="wizard-inner">
                <div class="connecting-line"></div>
                <ul class="nav nav-tabs" role="tablist">

                    <li role="presentation" class="active">
                        <a href="#step1" data-toggle="tab" aria-controls="step1" role="tab" title="Step 1">
                            <span class="round-tab">
                                <i class="glyphicon glyphicon-folder-open"></i>
                            </span>
                        </a>
                    </li>

                    <li role="presentation" class="disabled">
                        <a href="#step2" data-toggle="tab" aria-controls="step2" role="tab" title="Step 2">
                            <span class="round-tab">
                                <i class="glyphicon glyphicon-pencil"></i>
                            </span>
                        </a>
                    </li>
                    <li role="presentation" class="disabled">
                        <a href="#step3" data-toggle="tab" aria-controls="step3" role="tab" title="Step 3">
                            <span class="round-tab">
                                <i class="glyphicon glyphicon-picture"></i>
                            </span>
                        </a>
                    </li>

                    <li role="presentation" class="disabled">
                        <a href="#complete" data-toggle="tab" aria-controls="complete" role="tab" title="Complete">
                            <span class="round-tab">
                                <i class="glyphicon glyphicon-ok"></i>
                            </span>
                        </a>
                    </li>
                </ul>
            </div>

            <!-- <form role="form"> -->
			<form class="" name="form_contato" id="form_contato" method="post" action="">
                <div class="tab-content">
                    <div class="tab-pane active" role="tabpanel" id="step1">
                        <div class="step1">
                            <div class="row">
                            <div class="col-md-6">
                                <label for="exampleInputEmail1_x1">First Name</label>
                                <input type="text" class="form-control" id="exampleInputEmail1_x1" name="exampleInputEmail1_x1" placeholder="First Name">
                            </div>
                            <div class="col-md-6">
                                <label for="exampleInputEmail1_x2">Last Name</label>
                                <input type="text" class="form-control" id="exampleInputEmail1_x2" placeholder="Last Name">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <label>Email address (TESTE)</label>
                                <input type="email" class="form-control" id="email" name="email" placeholder="Email">
                            </div>
                            <div class="col-md-6">
                                <label for="exampleInputEmail1_x3">Confirm Email address</label>
                                <input type="email" class="form-control" id="exampleInputEmail1_x3" placeholder="Email">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <label for="exampleInputEmail1_x4">Mobile Number</label>
                                <input type="text" class="form-control" id="exampleInputEmail1_x4" placeholder="Email">
                            </div>
                            <div class="col-md-6">
                            <label for="exampleInputEmail1_x5">Email address</label>
                                <div class="row">
                                    <div class="col-md-3 col-xs-3">
                                        <input type="email" class="form-control" id="exampleInputEmail1_x5" placeholder="Email">
                                    </div>
                                    <div class="col-md-9 col-xs-9">
                                        <input type="email" class="form-control" id="exampleInputEmail1_x6" placeholder="Email">
                                    </div>
                                </div>
                            </div>
                        </div>
                        </div>
                        <ul class="list-inline pull-right">
                            <li><button type="button" class="btn btn-primary next-step">Save and continue</button></li>
                        </ul>
                    </div>
                    <div class="tab-pane" role="tabpanel" id="step2">
                        <div class="step2">
                            <div class="step_21">
                                <div class="row">
                                   
                                </div>
                            </div>
                            <div class="step-22">
                            
                            </div>
                        </div>
                        <ul class="list-inline pull-right">
                            <li><button type="button" class="btn btn-default prev-step">Previous</button></li>
                            <li><button type="button" class="btn btn-primary next-step">Save and continue</button></li>
                        </ul>
                    </div>
                    <div class="tab-pane" role="tabpanel" id="step3">
                        <div class="step33">
                        <h5><strong>Basic Details</strong></h5>
                        <hr>
                            <div class="row mar_ned">
                                
                            </div>
                            <div class="row mar_ned">
                                <div class="col-md-4 col-xs-3">
                                    <p align="right"><stong>Date of birth</stong></p>
                                </div>
                                <div class="col-md-8 col-xs-9">
                                    <div class="row">
                                        <div class="col-md-4 col-xs-4 wdth">
                                            <select name="visa_status" id="visa_status" class="dropselectsec1">
                                                <option value="">Date</option>
                                                <option value="2">1</option>
                                                <option value="1">2</option>
                                                <option value="4">3</option>
                                                <option value="5">4</option>
                                                <option value="6">5</option>
                                                <option value="3">6</option>
                                                <option value="7">7</option>
                                                <option value="8">8</option>
                                                <option value="9">9</option>
                                            </select>
                                        </div>
                                        <div class="col-md-4 col-xs-4 wdth">
                                            <select name="visa_status" id="visa_status" class="dropselectsec1">
                                                <option value="">Month</option>
                                                <option value="2">Jan</option>
                                                <option value="1">Feb</option>
                                                <option value="4">Mar</option>
                                                <option value="5">Apr</option>
                                                <option value="6">May</option>
                                                <option value="3">June</option>
                                                <option value="7">July</option>
                                                <option value="8">Aug</option>
                                                <option value="9">Sept</option>
                                            </select>
                                        </div>
                                        <div class="col-md-4 col-xs-4 wdth">
                                            <select name="visa_status" id="visa_status" class="dropselectsec1">
                                                <option value="">Year</option>
                                                <option value="2">1990</option>
                                                <option value="1">1991</option>
                                                <option value="4">1992</option>
                                                <option value="5">1993</option>
                                                <option value="6">1994</option>
                                                <option value="3">1995</option>
                                                <option value="7">1996</option>
                                                <option value="8">1997</option>
                                                <option value="9">1998</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row mar_ned">
                                <div class="col-md-4 col-xs-3">
                                    <p align="right"><stong>Marital Status</stong></p>
                                </div>
                                <div class="col-md-8 col-xs-9">
                                    <label class="radio-inline">
                                      <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> Single
                                    </label>
                                    <label class="radio-inline">
                                      <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> Married
                                    </label>
                                </div>
                            </div>
                            <div class="row mar_ned">
                                <div class="col-md-4 col-xs-3">
                                    <p align="right"><stong>Highest Education</stong></p>
                                </div>
                                <div class="col-md-8 col-xs-9">
                                    <select name="highest_qualification" id="highest_qualification" class="dropselectsec">
                                        <option value=""> Select Highest Education</option>
                                        <option value="1">Ph.D</option>
                                        <option value="2">Masters Degree</option>
                                        <option value="3">PG Diploma</option>
                                        <option value="4">Bachelors Degree</option>
                                        <option value="5">Diploma</option>
                                        <option value="6">Intermediate / (10+2)</option>
                                        <option value="7">Secondary</option>
                                        <option value="8">Others</option>
                                    </select>
                                </div>
                            </div>
                            <div class="row mar_ned">
                                <div class="col-md-4 col-xs-3">
                                    <p align="right"><stong>Specialization</stong></p>
                                </div>
                                <div class="col-md-8 col-xs-9">
                                    <input type="text" name="specialization" id="specialization" placeholder="Specialization" class="dropselectsec" autocomplete="off">
                                </div>
                            </div>
                            <div class="row mar_ned">
                                <div class="col-md-4 col-xs-3">
                                    <p align="right"><stong>Year of Passed Out</stong></p>
                                </div>
                                <div class="col-md-8 col-xs-9">
                                    <select name="year_of_passedout" id="year_of_passedout" class="birthdrop">
                                        <option value="">Year</option>
                                        <option value="1980">1980</option>
                                        <option value="1981">1981</option>
                                        <option value="1982">1982</option>
                                        <option value="1983">1983</option>
                                        <option value="1984">1984</option>
                                        <option value="1985">1985</option>
                                        <option value="1986">1986</option>
                                        <option value="1987">1987</option>
                                        <option value="1988">1988</option>
                                        <option value="1989">1989</option>
                                        <option value="1990">1990</option>
                                        <option value="1991">1991</option>
                                        <option value="1992">1992</option>
                                        <option value="1993">1993</option>
                                        <option value="1994">1994</option>
                                        <option value="1995">1995</option>
                                        <option value="1996">1996</option>
                                        <option value="1997">1997</option>
                                        <option value="1998">1998</option>
                                        <option value="1999">1999</option>
                                        <option value="2000">2000</option>
                                        <option value="2001">2001</option>
                                        <option value="2002">2002</option>
                                        <option value="2003">2003</option>
                                        <option value="2004">2004</option>
                                        <option value="2005">2005</option>
                                        <option value="2006">2006</option>
                                        <option value="2007">2007</option>
                                        <option value="2008">2008</option>
                                        <option value="2009">2009</option>
                                        <option value="2010">2010</option>
                                        <option value="2011">2011</option>
                                        <option value="2012">2012</option>
                                        <option value="2013">2013</option>
                                        <option value="2014">2014</option>
                                        <option value="2015">2015</option>
                                    </select>
                                </div>
                            </div>
                            <div class="row mar_ned">
                                <div class="col-md-4 col-xs-3">
                                    <p align="right"><stong>Total Experience</stong></p>
                                </div>
                                <div class="col-md-8 col-xs-9">
                                    <div class="row">
                                        <div class="col-md-6 col-xs-6 wdth">
                                            <select name="visa_status" id="visa_status" class="dropselectsec1">
                                                <option value="">Month</option>
                                                <option value="2">Jan</option>
                                                <option value="1">Feb</option>
                                                <option value="4">Mar</option>
                                                <option value="5">Apr</option>
                                                <option value="6">May</option>
                                                <option value="3">June</option>
                                                <option value="7">July</option>
                                                <option value="8">Aug</option>
                                                <option value="9">Sept</option>
                                            </select>
                                        </div>
                                        <div class="col-md-6 col-xs-6 wdth">
                                            
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row mar_ned">
                               
                            </div>
                        </div>
                        <ul class="list-inline pull-right">
                            <li><button type="button" class="btn btn-default prev-step">Previous</button></li>
                            <li><button type="button" class="btn btn-default next-step">Skip</button></li>
                            <li><button type="button" class="btn btn-primary btn-info-full next-step">Save and continue</button></li>
                        </ul>
                    </div>
                    <div class="tab-pane" role="tabpanel" id="complete">
                        <div class="step44">
                            <h5>Completed</h5>
                            
                          
                        </div>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </form>
        </div>
    </section>
   </div>
</div>

</body>
</html>

jquery jquery-validate jquery.validate

asked by anonymous 04.12.2017 / 03:04

1 answer

HTTP post in Angular JavaScript - Content of a TD comparing with a variable

score 2 · Accepted Answer

You must check in .on("click"... if the status of $("#form_contato") is true in order to continue.

You check this with $("#form_contato").valid() :

if($("#form_contato").valid()){
    // o formulário foi validado
}

So, you should do this check of the button that proceeds to the next step :

$(".next-step").click(function (e) {
   if($("#form_contato").valid()){
      var $active = $('.wizard .nav-tabs li.active');
      $active.next().removeClass('disabled');
      nextTab($active);
   }
});

It is also necessary to inform the validator methods of the ids of fields. In your case, the id of the " First name " field is exampleInputEmail1_x1 , so:

$("#form_contato").validate({
   rules: {
      exampleInputEmail1_x1: {
         required: true,
         email: true
      }
   },
   messages: {
      exampleInputEmail1_x1: {
         required: "Informe o e-mail",
         email: "Informe um e-mail válido"
      }
   }
});

See it working:

$(document).ready(function () {
   //Initialize tooltips
   $('.nav-tabs > li a[title]').tooltip();

   //Wizard
   $('a[data-toggle="tab"]').on('show.bs.tab', function (e) {

      var $target = $(e.target);

      if ($target.parent().hasClass('disabled')) {
         return false;
      }
   });

   $(".next-step").click(function (e) {
      if($("#form_contato").valid()){
         var $active = $('.wizard .nav-tabs li.active');
         $active.next().removeClass('disabled');
         nextTab($active);
      }
   });

   $(".prev-step").click(function (e) {
      var $active = $('.wizard .nav-tabs li.active');
      prevTab($active);
   });
});

function nextTab(elem) {
   $(elem).next().find('a[data-toggle="tab"]').click();
}

function prevTab(elem) {
   $(elem).prev().find('a[data-toggle="tab"]').click();
}

$().ready(function() {
   $("#form_contato").validate({
      rules: {
         exampleInputEmail1_x1: {
            required: true,
            email: true
         }
      },
      messages: {
         exampleInputEmail1_x1: {
            required: "Informe o e-mail",
            email: "Informe um e-mail válido"
         }
      }
   });
});

.wizard {
margin: 20px auto;
background: #fff;
}

.wizard .nav-tabs {
    position: relative;
    margin: 40px auto;
    margin-bottom: 0;
    border-bottom-color: #e0e0e0;
}

.wizard > div.wizard-inner {
    position: relative;
}

.connecting-line {
height: 2px;
background: #e0e0e0;
position: absolute;
width: 80%;
margin: 0 auto;
left: 0;
right: 0;
top: 50%;
z-index: 1;
}

.wizard .nav-tabs > li.active > a, .wizard .nav-tabs > li.active > a:hover, .wizard .nav-tabs > li.active > a:focus {
color: #555555;
cursor: default;
border: 0;
border-bottom-color: transparent;
}

span.round-tab {
width: 70px;
height: 70px;
line-height: 70px;
display: inline-block;
border-radius: 100px;
background: #fff;
border: 2px solid #e0e0e0;
z-index: 2;
position: absolute;
left: 0;
text-align: center;
font-size: 25px;
}
span.round-tab i{
color:#555555;
}
.wizard li.active span.round-tab {
background: #fff;
border: 2px solid #5bc0de;

}
.wizard li.active span.round-tab i{
color: #5bc0de;
}

span.round-tab:hover {
color: #333;
border: 2px solid #333;
}

.wizard .nav-tabs > li {
width: 25%;
}

.wizard li:after {
content: " ";
position: absolute;
left: 46%;
opacity: 0;
margin: 0 auto;
bottom: 0px;
border: 5px solid transparent;
border-bottom-color: #5bc0de;
transition: 0.1s ease-in-out;
}

.wizard li.active:after {
content: " ";
position: absolute;
left: 46%;
opacity: 1;
margin: 0 auto;
bottom: 0px;
border: 10px solid transparent;
border-bottom-color: #5bc0de;
}

.wizard .nav-tabs > li a {
width: 70px;
height: 70px;
margin: 20px auto;
border-radius: 100%;
padding: 0;
}

.wizard .nav-tabs > li a:hover {
    background: transparent;
}

.wizard .tab-pane {
position: relative;
padding-top: 50px;
}

.wizard h3 {
margin-top: 0;
}
.step1 .row {
margin-bottom:10px;
}
.step_21 {
border :1px solid #eee;
border-radius:5px;
padding:10px;
}
.step33 {
border:1px solid #ccc;
border-radius:5px;
padding-left:10px;
margin-bottom:10px;
}
.dropselectsec {
width: 68%;
padding: 6px 5px;
border: 1px solid #ccc;
border-radius: 3px;
color: #333;
margin-left: 10px;
outline: none;
font-weight: normal;
}
.dropselectsec1 {
width: 74%;
padding: 6px 5px;
border: 1px solid #ccc;
border-radius: 3px;
color: #333;
margin-left: 10px;
outline: none;
font-weight: normal;
}
.mar_ned {
margin-bottom:10px;
}
.wdth {
width:25%;
}
.birthdrop {
padding: 6px 5px;
border: 1px solid #ccc;
border-radius: 3px;
color: #333;
margin-left: 10px;
width: 16%;
outline: 0;
font-weight: normal;
}


/* according menu */
#accordion-container {
font-size:13px
}
.accordion-header {
font-size:13px;
background:#ebebeb;
margin:5px 0 0;
padding:7px 20px;
cursor:pointer;
color:#fff;
font-weight:400;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px
}
.unselect_img{
width:18px;
-webkit-user-select: none;  
-moz-user-select: none;     
-ms-user-select: none;      
user-select: none; 
}
.active-header {
-moz-border-radius:5px 5px 0 0;
-webkit-border-radius:5px 5px 0 0;
border-radius:5px 5px 0 0;
background:#F53B27;
}
.active-header:after {
content:"\f068";
font-family:'FontAwesome';
float:right;
margin:5px;
font-weight:400
}
.inactive-header {
background:#333;
}
.inactive-header:after {
content:"\f067";
font-family:'FontAwesome';
float:right;
margin:4px 5px;
font-weight:400
}
.accordion-content {
display:none;
padding:20px;
background:#fff;
border:1px solid #ccc;
border-top:0;
-moz-border-radius:0 0 5px 5px;
-webkit-border-radius:0 0 5px 5px;
border-radius:0 0 5px 5px
}
.accordion-content a{
text-decoration:none;
color:#333;
}
.accordion-content td{
border-bottom:1px solid #dcdcdc;
}



@media( max-width : 585px ) {

.wizard {
    width: 90%;
    height: auto !important;
}

span.round-tab {
    font-size: 16px;
    width: 50px;
    height: 50px;
    line-height: 50px;
}

.wizard .nav-tabs > li a {
    width: 50px;
    height: 50px;
    line-height: 50px;
}

.wizard li.active:after {
    content: " ";
    position: absolute;
    left: 35%;
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><linktype="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css"> 
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script><scripttype="text/javascript" src="https://www.agenciamove.com.br/js/validate.min.js"></script><divclass="container">
   <div class="row">
      <section>
         <div class="wizard">
            <div class="wizard-inner">
               <div class="connecting-line"></div>
               <ul class="nav nav-tabs" role="tablist">

                  <li role="presentation" class="active">
                     <a href="#step1" data-toggle="tab" aria-controls="step1" role="tab" title="Step 1">
                        <span class="round-tab">
                           <i class="glyphicon glyphicon-folder-open"></i>
                        </span>
                     </a>
                  </li>

                  <li role="presentation" class="disabled">
                     <a href="#step2" data-toggle="tab" aria-controls="step2" role="tab" title="Step 2">
                        <span class="round-tab">
                           <i class="glyphicon glyphicon-pencil"></i>
                        </span>
                     </a>
                  </li>

                  <li role="presentation" class="disabled">
                     <a href="#step3" data-toggle="tab" aria-controls="step3" role="tab" title="Step 3">
                        <span class="round-tab">
                           <i class="glyphicon glyphicon-picture"></i>
                        </span>
                     </a>
                  </li>

                  <li role="presentation" class="disabled">
                     <a href="#complete" data-toggle="tab" aria-controls="complete" role="tab" title="Complete">
                        <span class="round-tab">
                           <i class="glyphicon glyphicon-ok"></i>
                        </span>
                     </a>
                  </li>
               </ul>
            </div>

            <!-- <form role="form"> -->
            <form class="" name="form_contato" id="form_contato" method="post" action="">
               <div class="tab-content">
                  <div class="tab-pane active" role="tabpanel" id="step1">
                     <div class="step1">
                        <div class="row">
                           <div class="col-md-6">
                              <label for="exampleInputEmail1_x1">First Name</label>
                              <input type="text" class="form-control" id="exampleInputEmail1_x1" name="exampleInputEmail1_x1" placeholder="First Name">
                           </div>
                           <div class="col-md-6">
                              <label for="exampleInputEmail1_x2">Last Name</label>
                              <input type="text" class="form-control" id="exampleInputEmail1_x2" placeholder="Last Name">
                           </div>
                        </div>
                        <div class="row">
                           <div class="col-md-6">
                              <label>Email address (TESTE)</label>
                              <input type="email" class="form-control" id="email" name="email" placeholder="Email">
                           </div>
                           <div class="col-md-6">
                              <label for="exampleInputEmail1_x3">Confirm Email address</label>
                              <input type="email" class="form-control" id="exampleInputEmail1_x3" placeholder="Email">
                           </div>
                        </div>
                        <div class="row">
                           <div class="col-md-6">
                              <label for="exampleInputEmail1_x4">Mobile Number</label>
                              <input type="text" class="form-control" id="exampleInputEmail1_x4" placeholder="Email">
                           </div>
                           <div class="col-md-6">
                              <label for="exampleInputEmail1_x5">Email address</label>
                           <div class="row">
                              <div class="col-md-3 col-xs-3">
                                 <input type="email" class="form-control" id="exampleInputEmail1_x5" placeholder="Email">
                              </div>
                              <div class="col-md-9 col-xs-9">
                                 <input type="email" class="form-control" id="exampleInputEmail1_x6" placeholder="Email">
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
                  <ul class="list-inline pull-right">
                     <li><button type="button" class="btn btn-primary next-step">Save and continue</button></li>
                  </ul>
               </div>
               <div class="tab-pane" role="tabpanel" id="step2">
                  <div class="step2">
                     <div class="step_21">
                        <div class="row">
                        </div>
                     </div>
                     <div class="step-22">
                     </div>
                  </div>
                  <ul class="list-inline pull-right">
                     <li><button type="button" class="btn btn-default prev-step">Previous</button></li>
                     <li><button type="button" class="btn btn-primary next-step">Save and continue</button></li>
                  </ul>
               </div>
               <div class="tab-pane" role="tabpanel" id="step3">
                  <div class="step33">
                     <h5><strong>Basic Details</strong></h5>
                     <hr>
                  <div class="row mar_ned">
                  </div>
                  <div class="row mar_ned">
                     <div class="col-md-4 col-xs-3">
                        <p align="right"><stong>Date of birth</stong></p>
                     </div>
                     <div class="col-md-8 col-xs-9">
                        <div class="row">
                           <div class="col-md-4 col-xs-4 wdth">
                              <select name="visa_status" id="visa_status" class="dropselectsec1">
                                 <option value="">Date</option>
                                 <option value="2">1</option>
                                 <option value="1">2</option>
                                 <option value="4">3</option>
                                 <option value="5">4</option>
                                 <option value="6">5</option>
                                 <option value="3">6</option>
                                 <option value="7">7</option>
                                 <option value="8">8</option>
                                 <option value="9">9</option>
                              </select>
                           </div>
                           <div class="col-md-4 col-xs-4 wdth">
                              <select name="visa_status" id="visa_status" class="dropselectsec1">
                                 <option value="">Month</option>
                                 <option value="2">Jan</option>
                                 <option value="1">Feb</option>
                                 <option value="4">Mar</option>
                                 <option value="5">Apr</option>
                                 <option value="6">May</option>
                                 <option value="3">June</option>
                                 <option value="7">July</option>
                                 <option value="8">Aug</option>
                                 <option value="9">Sept</option>
                              </select>
                           </div>
                           <div class="col-md-4 col-xs-4 wdth">
                              <select name="visa_status" id="visa_status" class="dropselectsec1">
                                 <option value="">Year</option>
                                 <option value="2">1990</option>
                                 <option value="1">1991</option>
                                 <option value="4">1992</option>
                                 <option value="5">1993</option>
                                 <option value="6">1994</option>
                                 <option value="3">1995</option>
                                 <option value="7">1996</option>
                                 <option value="8">1997</option>
                                 <option value="9">1998</option>
                              </select>
                           </div>
                        </div>
                     </div>
                  </div>
                  <div class="row mar_ned">
                     <div class="col-md-4 col-xs-3">
                        <p align="right"><stong>Marital Status</stong></p>
                     </div>
                     <div class="col-md-8 col-xs-9">
                        <label class="radio-inline">
                           <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> Single
                        </label>
                        <label class="radio-inline">
                           <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> Married
                        </label>
                     </div>
                  </div>
                  <div class="row mar_ned">
                     <div class="col-md-4 col-xs-3">
                        <p align="right"><stong>Highest Education</stong></p>
                     </div>
                     <div class="col-md-8 col-xs-9">
                        <select name="highest_qualification" id="highest_qualification" class="dropselectsec">
                           <option value=""> Select Highest Education</option>
                           <option value="1">Ph.D</option>
                           <option value="2">Masters Degree</option>
                           <option value="3">PG Diploma</option>
                           <option value="4">Bachelors Degree</option>
                           <option value="5">Diploma</option>
                           <option value="6">Intermediate / (10+2)</option>
                           <option value="7">Secondary</option>
                           <option value="8">Others</option>
                        </select>
                     </div>
                  </div>
                  <div class="row mar_ned">
                     <div class="col-md-4 col-xs-3">
                        <p align="right"><stong>Specialization</stong></p>
                     </div>
                     <div class="col-md-8 col-xs-9">
                        <input type="text" name="specialization" id="specialization" placeholder="Specialization" class="dropselectsec" autocomplete="off">
                     </div>
                  </div>
                  <div class="row mar_ned">
                     <div class="col-md-4 col-xs-3">
                        <p align="right"><stong>Year of Passed Out</stong></p>
                     </div>
                     <div class="col-md-8 col-xs-9">
                        <select name="year_of_passedout" id="year_of_passedout" class="birthdrop">
                           <option value="">Year</option>
                           <option value="1980">1980</option>
                           <option value="1981">1981</option>
                           <option value="1982">1982</option>
                           <option value="1983">1983</option>
                           <option value="1984">1984</option>
                           <option value="1985">1985</option>
                           <option value="1986">1986</option>
                           <option value="1987">1987</option>
                           <option value="1988">1988</option>
                           <option value="1989">1989</option>
                           <option value="1990">1990</option>
                           <option value="1991">1991</option>
                           <option value="1992">1992</option>
                           <option value="1993">1993</option>
                           <option value="1994">1994</option>
                           <option value="1995">1995</option>
                           <option value="1996">1996</option>
                           <option value="1997">1997</option>
                           <option value="1998">1998</option>
                           <option value="1999">1999</option>
                           <option value="2000">2000</option>
                           <option value="2001">2001</option>
                           <option value="2002">2002</option>
                           <option value="2003">2003</option>
                           <option value="2004">2004</option>
                           <option value="2005">2005</option>
                           <option value="2006">2006</option>
                           <option value="2007">2007</option>
                           <option value="2008">2008</option>
                           <option value="2009">2009</option>
                           <option value="2010">2010</option>
                           <option value="2011">2011</option>
                           <option value="2012">2012</option>
                           <option value="2013">2013</option>
                           <option value="2014">2014</option>
                           <option value="2015">2015</option>
                        </select>
                     </div>
                  </div>
                  <div class="row mar_ned">
                     <div class="col-md-4 col-xs-3">
                        <p align="right"><stong>Total Experience</stong></p>
                     </div>
                     <div class="col-md-8 col-xs-9">
                        <div class="row">
                           <div class="col-md-6 col-xs-6 wdth">
                              <select name="visa_status" id="visa_status" class="dropselectsec1">
                                 <option value="">Month</option>
                                 <option value="2">Jan</option>
                                 <option value="1">Feb</option>
                                 <option value="4">Mar</option>
                                 <option value="5">Apr</option>
                                 <option value="6">May</option>
                                 <option value="3">June</option>
                                 <option value="7">July</option>
                                 <option value="8">Aug</option>
                                 <option value="9">Sept</option>
                              </select>
                           </div>
                           <div class="col-md-6 col-xs-6 wdth">
                           </div>
                        </div>
                     </div>
                  </div>
                  <div class="row mar_ned">
                  </div>
               </div>
               <ul class="list-inline pull-right">
                  <li><button type="button" class="btn btn-default prev-step">Previous</button></li>
                  <li><button type="button" class="btn btn-default next-step">Skip</button></li>
                  <li><button type="button" class="btn btn-primary btn-info-full next-step">Save and continue</button></li>
               </ul>
            </div>
            <div class="tab-pane" role="tabpanel" id="complete">
               <div class="step44">
                  <h5>Completed</h5>
               </div>
            </div>
            <div class="clearfix"></div>
               </div>
            </form>
         </div>
      </section>
   </div>
</div>