2

Estou montando um formulário passo a passo. Fiz um teste um o Validate no campo de e-mail e, a verificação do e-mail deu certo, porém, o Validate não barra ir para o próximo passo, caso o campo esteja em branco.

Segue o que fiz até agora.

<!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 -->
<link type="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>

<script type="text/javascript" src="https://www.agenciamove.com.br/js/validate.min.js"></script>

<script type="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>

1 Resposta 1

2

É preciso verificar no .on("click"... se o estado do $("#form_contato") é verdadeiro para poder continuar.

Você verifica isso com $("#form_contato").valid():

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

Logo, você deve fazer esta verificação escutador do botão que prossegue para o próximo passo:

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

É preciso também, informar nos métodos do validador as ids dos campos. No seu caso, a id do campo "First name" é exampleInputEmail1_x1, logo:

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

Veja funcionando:

$(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>
<link type="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>

<script type="text/javascript" src="https://www.agenciamove.com.br/js/validate.min.js"></script>   
<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>

3
  • Espetacular! Entendi o que houve. Muito obrigado! 4/12/2017 às 13:06
  • Esqueci de um pequeno detalhe: quando chega no fim dos passos, é possível enviar os dados formulário para o PHP? No Smart Wizard 3, que já usei mas não gostei muito, ele pega um input hidden (<input type='hidden' name="issubmit" value="1">) e joga para o PHP (<?php if(isset($_REQUEST['issubmit'])){ echo "<strong>form is sumbitted</strong>"; } ?>). Seria possível fazer algo similar? 7/12/2017 às 12:29
  • @RogérioPancini Coloque um botão, tipo "Enviar", com type="submit" no último passo, e coloque a página php no action="" do form.
    – Meu ovo
    7/12/2017 às 15:15

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .