<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<form>
<div class="form-group">
<label class="sr-only" for="form-pickup">Pickup location</label>
<input type="text" name="form-pickup" placeholder="Taxi from?" class="form-pickup form-control" id="form-pickup">
<span id="error_from" class="text-danger"></span>
</div>
<div class="form-group">
<label class="sr-only" for="form-dropoff">Drop off location</label>
<input type="text" name="form-dropoff" placeholder="Taxi to?" class="form-dropoff form-control" id="form-dropoff">
<span id="error_to" class="text-danger"></span>
</div>
<div class="form-group">
<label class="sr-only" for="form-date">Journey date </label>
<input type="text" name="form-date" placeholder="When?" class="form-date form-control" id="form-date">
<span id="error_date" class="text-danger"></span>
</div>
<div class="form-group">
<label class="sr-only" for="form-date">Journey time</label>
<input type="text" name="form-time" placeholder="Time?" class="form-time form-control" id="form-time">
<span id="error_time" class="text-danger"></span>
</div>
</form>
.wizard {
margin: 20px auto;
background: #fff;
}
.wizard .nav-tabs {
position: relative;
margin: 40px auto;
margin-bottom: 0;
border-bottom-color: #e0e0e0;
}
.wizard > 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;
}
@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%;
}
$(document).ready(function () {
$flag=1;
var pickup = false;
var dropoff = false;
var date = false;
var time = false;
var name= false;
var email =false;
var phone =false;
var journeytype = false;
var pass = false;
var pack= false;
var seat =false;
var coc =false;
// tab 1 //
$("#form-pickup").focusout(function(){
if($(this).val()===''){
$(this).css("border-color", "#FF0000");
$('#fwd1').attr('disabled',true);
$("#error_from").text("Please select your pickup location");
pickup=false;
}
else
{
$(this).css("border-color", "#2eb82e");
pickup=true;
$("#error_from").text("");
if(pickup===true && dropoff===true && date===true && time===true){
$('#fwd1').attr('disabled',false);
}
}
});
$("#form-dropoff").focusout(function(){
if($(this).val()===''){
$(this).css("border-color", "#FF0000");
$('#fwd1').attr('disabled',true);
$("#error_to").text("Please select your drop off location");
dropoff=false;
}
else
{
$(this).css("border-color", "#2eb82e");
dropoff=true;
$("#error_to").text("");
if(pickup===true && dropoff===true && date===true && time===true){
$('#fwd1').attr('disabled',false);
}
}
});
$("#form-date").focusout(function(){
if($(this).val()===''){
$(this).css("border-color", "#FF0000");
$('#fwd1').attr('disabled',true);
$("#error_date").text("Please select your pickup date");
date=false;
}
else
{
$(this).css("border-color", "#2eb82e");
date=true;
$("#error_date").text("");
if(pickup===true && dropoff===true && date===true && time===true){
$('#fwd1').attr('disabled',false);
}
}
});
$("#form-time").focusout(function(){
if($(this).val()===''){
$(this).css("border-color", "#FF0000");
$('#fwd1').attr('disabled',true);
$("#error_time").text("Please select your pickup time");
date=false;
}
else
{
$(this).css({"border-color":"#2eb82e"});
time=true;
$("#error_time").text("");
if(pickup===true && dropoff===true && date===true && time===true){
$('#fwd1').attr('disabled',false);
}
}
});
// tab 2 //
$("#form-name").focusout(function(){
if($(this).val()===''){
$(this).css("border-color", "#FF0000");
$('#fwd2').attr('disabled',true);
$("#error_name").text("Please input your name");
name=false;
}
else
{
$(this).css({"border-color":"#2eb82e"});
name=true;
$("#error_name").text("");
if(name===true && email===true && phone===true){
$('#fwd2').attr('disabled',false);
}
}
});
$("#form-email").focusout(function(){
if($(this).val()===''){
$(this).css("border-color", "#FF0000");
$('#fwd2').attr('disabled',true);
$("#error_name").text("Please input your email");
email=false;
}
else
{
$(this).css({"border-color":"#2eb82e"});
email=true;
$("#error_email").text("");
if(name===true && email===true && phone===true){
$('#fwd2').attr('disabled',false);
}
}
});
$("#form-phone").focusout(function(){
$pho =$("#form-phone").val();
if($(this).val()===''){
$(this).css("border-color", "#FF0000");
$('#fwd2').attr('disabled',true);
phone=false;
$("#error_phone").text("Please enter your telephone number");
}
else if ($pho.length<10)
{
$(this).css("border-color", "#FF0000");
$('#fwd2').attr('disabled',true);
phone=false;
$("#error_phone").text("Phone number is too short. Please check");
}
else if(!$.isNumeric($pho))
{
$(this).css("border-color", "#FF0000");
$('#fwd2').attr('disabled',true);
$("#error_phone").text("Phone number should only contain numbers. Please do not use the plus sign or spaces.");
}
else{
$(this).css({"border-color":"#2eb82e"});
phone=true;
if(name===true && email===true && phone===true){
$('#fwd2').attr('disabled',false);
}
$("#error_phone").text("");
}
});
// tab 3 //
$("#form-journey-type").on('change', function() {
{
$(this).css("border-color", "#2eb82e");
journeytype=true;
$("#error_type").text("");
if(journeytype===true && pass===true && pack===true && seat ===true ){
$('#fwd3').attr('disabled',false);
}
}
});
$("#form-passanger-number").on('change', function() {
{
$(this).css("border-color", "#2eb82e");
pass=true;
$("#error_passanger").text("");
if(journeytype===true && pass===true && pack===true && seat ===true ){
$('#fwd3').attr('disabled',false);
}
}
});
$("#form-packages-number").on('change', function() {
{
$(this).css("border-color", "#2eb82e");
pack=true;
$("#error_case").text("");
if(journeytype===true && pass===true && pack===true && seat ===true ){
$('#fwd3').attr('disabled',false);
}
}
});
$("#form-child-seat").on('change', function() {
{
$(this).css("border-color", "#2eb82e");
seat=true;
$("#error_case").text("");
if(journeytype===true && pass===true && pack===true && seat ===true ){
$('#fwd3').attr('disabled',false);
}
}
});
$("#coc").on('click', function() {
if ($(this).is(':checked')) {
$(this).css("border-color", "#2eb82e");
coc=true;
$("#error_coc").text("");
$('#submit').attr('disabled',false);
}
else
{
$(this).css("border-color", "#FF0000");
$('#submit').attr('disabled',true);
$("#error_coc").text("Please accept conditions of carriage");
coc=false;
}
});
