Using Jquery Validate in conjunction with Form Wizard

Asked

Viewed 936 times

1

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

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

jquery jquery-validate jquery.validate

1 answer

2


It is necessary to check in the .on("click"... if the state of $("#form_contato") is true in order to continue.

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

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

Therefore, you should do this listening 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 also takes, inform in the validator’s methods ids fields. In your case, the id country "First name" is exampleInputEmail1_x1, soon:

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

  • Spectacular! I understood what happened. Thank you very much!

  • I forgot a small detail: when it comes to the end of the steps, is it possible to send the form data to PHP? In Smart Wizard 3, which I used but didn’t like much, he takes an Hidden input (<input type='Hidden' name="issubmit" value="1">) and plays for PHP (<?php if(isset($_REQUEST['issubmit'])){ echo "<Strong>form is sumbitted</Strong>"; } ?>). It would be possible to do something similar?

  • @Rogériopancini Place a button, type "Send", with type="Submit" in the last step, and place the php page in the form action="" form.

Browser other questions tagged jquery jquery-validate jquery.validate

You are not signed in. Login or sign up in order to post.