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>