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>
Spectacular! I understood what happened. Thank you very much!
– Rogério Pancini
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ério Pancini
@Rogériopancini Place a button, type "Send", with type="Submit" in the last step, and place the php page in the form action="" form.
– Sam