I am using this steps plugin/code on my site:
https://bootsnipp.com/fullscreen/RlOe3
What i want, is that when i am on the second or third tab, i want to show a back button to the previous div/step.
If i add the button with class="backBtn", how can i go back with the javascript?
$(document).ready(function () {
var navListItems = $('div.setup-panel div a'),
allWells = $('.setup-content'),
allNextBtn = $('.nextBtn');
allWells.hide();
navListItems.click(function (e) {
e.preventDefault();
var $target = $($(this).attr('href')),
$item = $(this);
if (!$item.hasClass('disabled')) {
navListItems.removeClass('btn-primary').addClass('btn-default');
$item.addClass('btn-primary');
allWells.hide();
$target.show();
$target.find('input:eq(0)').focus();
}
});
allNextBtn.click(function(){
var curStep = $(this).closest(".setup-content"),
curStepBtn = curStep.attr("id"),
nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"),
curInputs = curStep.find("input[type='text'],input[type='url']"),
isValid = true;
$(".form-group").removeClass("has-error");
for(var i=0; i<curInputs.length; i++){
if (!curInputs[i].validity.valid){
isValid = false;
$(curInputs[i]).closest(".form-group").addClass("has-error");
}
}
if (isValid)
nextStepWizard.removeAttr('disabled').trigger('click');
});
$('div.setup-panel div a.btn-primary').trigger('click');
});
Below you have a working example. I used the code from the link you provided. What I did was the following:
added two back buttons => <button class="btn btn-primary backBtn btn-lg pull-left" type="button" >Back</button>
looked how the next function is implemented and reverse the behavior
I also disable the next step when you press back, as it should be. If you also want to clear the values, in can be easily done, but that's your homework.
Cheers!
$(document).ready(function () {
var navListItems = $('div.setup-panel div a'),
allWells = $('.setup-content'),
allNextBtn = $('.nextBtn'),
allBackBtn = $('.backBtn');
allWells.hide();
navListItems.click(function (e) {
e.preventDefault();
var $target = $($(this).attr('href')),
$item = $(this);
if (!$item.hasClass('disabled')) {
navListItems.removeClass('btn-primary').addClass('btn-default');
$item.addClass('btn-primary');
allWells.hide();
$target.show();
$target.find('input:eq(0)').focus();
}
});
allNextBtn.click(function(){
var curStep = $(this).closest(".setup-content"),
curStepBtn = curStep.attr("id"),
nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"),
curInputs = curStep.find("input[type='text'],input[type='url']"),
isValid = true;
$(".form-group").removeClass("has-error");
for(var i=0; i<curInputs.length; i++){
if (!curInputs[i].validity.valid){
isValid = false;
$(curInputs[i]).closest(".form-group").addClass("has-error");
}
}
if (isValid)
nextStepWizard.removeAttr('disabled').trigger('click');
});
allBackBtn.click(function() {
var curStep = $(this).closest(".setup-content");
var curStepBtn = curStep.attr("id");
var currStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().children("a");
var prevStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().prev().children("a");
prevStepWizard.trigger('click');
currStepWizard.attr("disabled", "disabled");
});
$('div.setup-panel div a.btn-primary').trigger('click');
});
body {
margin-top:40px;
}
.stepwizard-step p {
margin-top: 10px;
}
.stepwizard-row {
display: table-row;
}
.stepwizard {
display: table;
width: 50%;
position: relative;
}
.stepwizard-step button[disabled] {
opacity: 1 !important;
filter: alpha(opacity=100) !important;
}
.stepwizard-row:before {
top: 14px;
bottom: 0;
position: absolute;
content: " ";
width: 100%;
height: 1px;
background-color: #ccc;
z-order: 0;
}
.stepwizard-step {
display: table-cell;
text-align: center;
position: relative;
}
.btn-circle {
width: 30px;
height: 30px;
text-align: center;
padding: 6px 0;
font-size: 12px;
line-height: 1.428571429;
border-radius: 15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ---------->
<div class="container">
<div class="stepwizard col-md-offset-3">
<div class="stepwizard-row setup-panel">
<div class="stepwizard-step">
1
<p>Step 1</p>
</div>
<div class="stepwizard-step">
2
<p>Step 2</p>
</div>
<div class="stepwizard-step">
3
<p>Step 3</p>
</div>
</div>
</div>
<form role="form" action="" method="post">
<div class="row setup-content" id="step-1">
<div class="col-xs-6 col-md-offset-3">
<div class="col-md-12">
<h3> Step 1</h3>
<div class="form-group">
<label class="control-label">First Name</label>
<input maxlength="100" type="text" class="form-control" placeholder="Enter First Name" />
</div>
<div class="form-group">
<label class="control-label">Last Name</label>
<input maxlength="100" type="text" class="form-control" placeholder="Enter Last Name" />
</div>
<div class="form-group">
<label class="control-label">Email</label>
<input maxlength="100" type="text" required="required" class="form-control" placeholder="Enter Email" />
</div>
<div class="form-group">
<label class="control-label">Address</label>
<textarea required="required" class="form-control" placeholder="Enter your address" ></textarea>
</div>
<button class="btn btn-primary nextBtn btn-lg pull-right" type="button" >Next</button>
</div>
</div>
</div>
<div class="row setup-content" id="step-2">
<div class="col-xs-6 col-md-offset-3">
<div class="col-md-12">
<h3> Step 2</h3>
<div class="form-group">
<label class="control-label">Company Name</label>
<input maxlength="200" type="text" required="required" class="form-control" placeholder="Enter Company Name" />
</div>
<div class="form-group">
<label class="control-label">Company Address</label>
<input maxlength="200" type="text" required="required" class="form-control" placeholder="Enter Company Address" />
</div>
<button class="btn btn-primary backBtn btn-lg pull-left" type="button" >Back</button>
<button class="btn btn-primary nextBtn btn-lg pull-right" type="button" >Next</button>
</div>
</div>
</div>
<div class="row setup-content" id="step-3">
<div class="col-xs-6 col-md-offset-3">
<div class="col-md-12">
<h3> Step 3</h3>
<button class="btn btn-primary backBtn btn-lg pull-left" type="button" >Back</button>
<button class="btn btn-success btn-lg pull-right" type="submit">Submit</button>
</div>
</div>
</div>
</form>
</div>
Related
This step form is not validating the required field. the error most probably occurs in the next button. When I was able to validate the first field then the next button didn't work. I used a function checkvalue() to validate the fields. I have given both HTML and javascript part below , Any help will be greatly appreciated.
<script>
$(document).ready(function () {
var current_fs, next_fs, previous_fs; //fieldsets
var opacity;
var current = 1;
var steps = $("tab").length;
setProgressBar(current);
$(".next").click(function () {
current_fs = $(this).parent();
next_fs = $(this).parent().next();
//Add Class Active
$("#progressbar li").eq($("tab").index(next_fs)).addClass("active");
//show the next fieldset
next_fs.show();
//hide the current fieldset with style
current_fs.animate({ opacity: 0 }, {
step: function (now) {
// for making fielset appear animation
opacity = 1 - now;
current_fs.css({
'display': 'none',
'position': 'relative'
});
next_fs.css({
'opacity': opacity,
'display': 'block'
});
},
duration: 500
});
setProgressBar(++current);
});
$(".previous").click(function () {
current_fs = $(this).parent();
previous_fs = $(this).parent().prev();
//console.log(current_fs.css)
//Remove class active
// $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");
//show the previous fieldset
previous_fs.show();
//hide the curren t fieldset with style
current_fs.animate({ opacity: 0 }, {
step: function (now) {
// for making fielset appear animation
opacity = 1 - now;
current_fs.css({
'display': 'none',
'position': 'relative'
});
previous_fs.css({
'opacity': opacity,
'display': 'block'
});
},
duration: 500
});
setProgressBar(--current);
});
function setProgressBar(curStep) {
var percent = parseFloat(100 / steps) * curStep;
percent = percent.toFixed();
$(".progress-bar")
.css("width", percent + "%")
}
});
var currentTab = 0; // Current tab is set to be the first tab (0)
showTab(currentTab); // Display the current tab
function showTab(n) {
// This function will display the specified tab of the form...
var x = document.getElementsByClassName("tab");
x[n].style.display = "block";
}
function checkValue() {
var name = document.getElementById("orgame");
if(name.value === "") {
var att = document.createAttribute("required");
name.setAttributeNode(att);
}
var name = document.getElementById("facility-count");
if(name.value === "") {
var att = document.createAttribute("required");
name.setAttributeNode(att);
}
var name = document.getElementById("unitCount");
if(name.value === "") {
var att = document.createAttribute("required");
name.setAttributeNode(att);
}
}
</script>
<html>
<body class="bg-light">
<h2 style="font-family: montserrat;font-size:26px;font-weight: 600;z-index: 1;color: white;text-align:center;margin-top:240px;">Cost Savings Calculator </h2>
<center style="">
<div class="card col-lg-9 innerBox" style="margin-top:50px;border-radius:22px 22px 0px 0px;">
<div class="card-body" style="
margin-bottom: 20px;">
<div>
<div class="tab">
<div class="float-start backArrowBtn">
<img src=" backArrow.png" height="30px" width="30px">
</div>
<div class="form-group" style="align-content:center;margin-bottom: 20px;">
<label id="label" for="orgName" >Organization Name</label>
<input type="text" class="form-control w-50 form-control-lg" name="organization-name" id="orgName"
placeholder="We Care" required>
</div>
<button name="next" class="next btn btn-primary" onclick="checkValue()">Next</button>
</div>
<div class="tab">
<img src=" backArrow.png" height="30px" width="30px" name="previous"
class="previous action-button-previous float-start backArrowBtn">
<div class="form-group" style="align-content:center;margin-bottom: 20px;">
<label id="label" for="facilityCount">Number of Facilities</label>
<input type="number" name="ffname" class="form-control w-50 form-control-lg" id="facility-count"
placeholder="1000" required >
</div>
<button name="next" class="next btn btn-primary" onclick = "checkValue()"style="font-family:montserrat;padding-top: 0px;font-size: 17px;font-weight: 400;padding-right: 0px;padding-bottom: 0px;width: 128px;height: 49px;padding-left: 0px;margin-top:3%;">Next</button>
</div>
<div class="tab">
<img src=" backArrow.png" height="30px" width="30px" name="previous"
class="previous action-button-previous float-start backArrowBtn">
<div class="form-group" style="align-content:center;margin-bottom: 20px;">
<label id="label2" for="unitCount" >Average number of units per facility<br>
<span class="extraLabel" style="font-family: montserrat;font-size:20px;font-weight: 600;margin-right:0%">(Optional: Hospitals Only)</span></label><br>
<input type="number" name="units-per-facility"class="form-control w-50 form-control-lg" id="unitCount"
placeholder="1000" required style="font-family: montserrat;border:0.5px solid;border-radius:10px;">
</div>
<button type="button" name="next" class="next btn btn-primary" onclick = "checkValue()"style="font-family:montserrat;padding-top: 0px;font-size: 17px;font-weight: 400;padding-right: 0px;padding-bottom: 0px;width: 128px;height: 49px;padding-left: 0px;margin-top:3%;">Next</button><br>
</div>
<div class="col-sm-7">
<div class="form-group">
<input type="text" name="name-a"class="form-control w-75 formInput"
placeholder="Name" id="orgName" style="border: solid 1px #0b13a2;border-radius: 9px;font-family: montserrat;font-size: 15px; ">
<input type="text" name="titlee" class="form-control w-75 formInput"
placeholder="Title" style="border: solid 1px #0b13a2;border-radius: 9px;font-family: montserrat;font-size: 15px;">
<input type="text" name="company" class="form-control w-75 formInput"
placeholder="Company Name" style="border: solid 1px #0b13a2;border-radius: 9px;font-family: montserrat;font-size: 15px;">
<input type="email" name="emails" class="form-control w-75 formInput"
placeholder="Email" style="border: solid 1px #0b13a2;border-radius: 9px;font-family: montserrat;font-size: 15px;">
<input type="submit" value="Submit" class="btn btn-primary" style="font-family:montserrat;font-size: 17px;font-weight: 400;width: 75%;height: 49px;" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="progress col-lg-9" style="height: 5px;">
<div class="progress-bar" role="progressbar" style="width: 25%; background-color: #0B13A2;"
aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</center>
</html>
When I click the + next to the Input 1 a line gets cloned and next to the first line a - appears, which is precise what I want :-)
But when I press the + next to the Input 2 the - icon appears in next to the line of Input 1.
I can't figure out what I'm doing wrong as when you click + next to Input 2 I want the - next to the first line of Input 2
$(function() {
$(document).on('click', '.btn-add', function(e) {
e.preventDefault();
var controlForm = $('.controls form:first'),
currentEntry = $(this).parents('.entry:first'),
newEntry = $(currentEntry.clone()).appendTo(controlForm);
newEntry.find('input').val('');
controlForm.find('.entry:not(:last) .btn-add')
.removeClass('btn-add').addClass('btn-remove')
.removeClass('btn-success').addClass('btn-danger')
.html('<span>-</span>');
}).on('click', '.btn-remove', function(e) {
$(this).parents('.entry:first').remove();
e.preventDefault();
return false;
});
});
.entry {
text-align: left;
margin-bottom: 25px;
margin-top: 25px;
}
.entry input {
height: 50px;
padding: 10px;
}
.entry input:nth-child(2) {
margin-left: 25px;
width: 66%
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="controls">
<form class="school_form" role="form" autocomplete="off">
<div class="entry input-group">
<input type="text" name="opl_datum" placeholder="Periode Input 1" class='enableOnInput' disabled='disabled'>
<input type="text" name="school" placeholder="Input 1" class='enableOnInput' disabled='disabled'>
<span class="input-group-btn">
<button class="btn btn-success btn-add" type="button">
<span>+</span>
</button>
</span>
</div>
</form>
</div>
<div class="controls">
<form class="werk_form" role="form" autocomplete="off">
<div class="entry input-group">
<input type="text" name="werk_datum" placeholder="Periode Input 2" class='enableOnInput' disabled='disabled'>
<input type="text" name="werkgever" placeholder="Input 2" class='enableOnInput' disabled='disabled'>
<span class="input-group-btn">
<button class="btn btn-success btn-add" type="button">
<span>+</span>
</button>
</span>
</div>
</form>
</div>
var controlForm = $('.controls form:first')//here you also select first control even if you are on second controlforms
so replace this with
var controlForm = $(this).closest('.controls').find('form:first')//which is also select closest one
$(function() {
$(document).on('click', '.btn-add', function(e) {
e.preventDefault();
var controlForm = $(this).closest('.controls').find('form:first'),//you have to select colsest controls
currentEntry = $(this).parents('.entry:first'),
newEntry = $(currentEntry.clone()).appendTo(controlForm);
newEntry.find('input').val('');
controlForm.find('.entry:not(:last) .btn-add')
.removeClass('btn-add').addClass('btn-remove')
.removeClass('btn-success').addClass('btn-danger')
.html('<span>-</span>');
}).on('click', '.btn-remove', function(e) {
$(this).parents('.entry:first').remove();
e.preventDefault();
return false;
});
});
.entry {
text-align: left;
margin-bottom: 25px;
margin-top: 25px;
}
.entry input {
height: 50px;
padding: 10px;
}
.entry input:nth-child(2) {
margin-left: 25px;
width: 66%
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="controls">
<form class="school_form" role="form" autocomplete="off">
<div class="entry input-group">
<input type="text" name="opl_datum" placeholder="Periode Input 1" class='enableOnInput' disabled='disabled'>
<input type="text" name="school" placeholder="Input 1" class='enableOnInput' disabled='disabled'>
<span class="input-group-btn">
<button class="btn btn-success btn-add" type="button">
<span>+</span>
</button>
</span>
</div>
</form>
</div>
<div class="controls">
<form class="werk_form" role="form" autocomplete="off">
<div class="entry input-group">
<input type="text" name="werk_datum" placeholder="Periode Input 2" class='enableOnInput' disabled='disabled'>
<input type="text" name="werkgever" placeholder="Input 2" class='enableOnInput' disabled='disabled'>
<span class="input-group-btn">
<button class="btn btn-success btn-add" type="button">
<span>+</span>
</button>
</span>
</div>
</form>
</div>
I am using Javascript regualar expression for form validation in my project.Once the validation is completed without any error and while clicking submit button the form should submit and I need to change the submit value to 'please wait..'.
I have tried two methods.
Method 1:By changing the submit value
Method 2:Hide/show method using jquery
Both the methods are not working and i couldn't find the error to.Can anyone help me with this?
/*
// Initialize and add the map
function initMap() {
// The location of Uluru
var uluru = {lat: 12.991011, lng: 77.721225};
// The map, centered at Uluru
var map = new google.maps.Map(
document.getElementById('map'), {zoom: 10, center: uluru});
// The marker, positioned at Uluru
var marker = new google.maps.Marker({position: uluru, map: map});
}
*/
function pagetest(){
var name= document.getElementById("name").value;
var filt = /^[a-zA-Z]+$/;
if (!name.match(filt)){
document.getElementById("name").style.borderColor="red";
document.getElementById("nameerror").innerHTML='Name should not contain any number or special characters';
document.getElementById("nameerror").style.color='red';
}
else{
document.getElementById("name").style.borderColor="green";
document.getElementById("nameerror").innerHTML='valid name';
document.getElementById("nameerror").style.color='green';
}
var number=document.getElementById("mobile").value;
if(number.length!=10)
{
document.getElementById("mobile").style.borderColor="red";
document.getElementById("moberror").innerHTML="Number should be exactly 10 digits and not less than or more than that";
document.getElementById("moberror").style.color='red';
}
else
{
document.getElementById("mobile").style.borderColor="green";
document.getElementById("moberror").innerHTML="valid number";
document.getElementById("moberror").style.color='green';
}
var email = document.getElementById("email").value;
var filter = /^([a-zA-Z0-9_\.\-])+\#(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,3})+$/;
if (!filter.test(email)) {
document.getElementById("email").style.borderColor="red";
document.getElementById("emailerror").innerHTML="Please provide a valid email address";
document.getElementById("emailerror").style.color="red";
}
else{
document.getElementById("email").style.borderColor="green";
document.getElementById("emailerror").innerHTML='valid email address';
document.getElementById("emailerror").style.color='green';
}
var country= document.getElementById("country").value;
var filt = /^[a-zA-Z]+$/;
if (!country.match(filt)) {
document.getElementById("country").style.borderColor="red";
document.getElementById("countryerror").innerHTML='country should not contain any number or special characters';
document.getElementById("countryerror").style.color='red';
}
else{
document.getElementById("country").style.borderColor="green";
document.getElementById("countryerror").innerHTML='Valid Country name';
document.getElementById("countryerror").style.color='green';
}
var city= document.getElementById("city").value;
var filt = /^[a-zA-Z]+$/;
if (!city.match(filt)) {
document.getElementById("city").style.borderColor="red";
document.getElementById("cityerror").innerHTML='city should not contain any number or special characters';
document.getElementById("cityerror").style.color='red';
}
else{
document.getElementById("city").style.borderColor="green";
document.getElementById("cityerror").innerHTML='Valid city name';
document.getElementById("cityerror").style.color='green';
}
/* var reg = /[^A-Za-z]/;
if ((reg.test(query) == false) && (query ==""))
{
document.getElementById('query').style.borderColor="red";
document.getElementById('queryerror').innerHTML="This field is required";
}
else{
document.getElementById("query").style.borderColor="green";
document.getElementById("queryerror").innerHTML ="";
}*/
var security = document.getElementById("security").value;
var securitycode = document.getElementById("securitycode").innerHTML;
if(security ==securitycode){
document.getElementById("security").style.borderColor="";
document.getElementById("codeerror").innerHTML="Code matched";
document.getElementById("codeerror").style.color='green';
}
else{
document.getElementById("security").style.borderColor="red";
document.getElementById("codeerror").innerHTML="Code didn't match or emplty";
document.getElementById("codeerror").style.color='red';
var val =Math.floor(1000 + Math.random() * 9000);
document.getElementById("securitycode").innerHTML =val;
security.focus;
}
if( (name!="") && (email!="") && (number!="") && (country!="") && (city!="") && (security!=""))
{
//alert("ok");
document.getElementById("form_id").submit();//submit() is a predefined function in js.
//document.getElementById("").innerHTML='Please wait..';
}
}
/*$(document).ready(function(){
$('form').submit(function(){
if(validationIsTrue()){
(":button").css('display':'none');
('#Button1').css('display':'block');
}
else{
return false;
}
});
});
$("#form_id").on("submit", function(e){
var $this = $(this);
if(this.checkValidity()) {
e.preventDefault();
alert('ok');
//$this.parents(".form-wrap").hide();
//$(".success-msg").removeClass("hidden")
}
});
*/
.iframe-container{
position: relative;
width: 100%;
padding-bottom: 56.25%; /* Ratio 16:9 ( 100%/16*9 = 56.25% ) */
}
.iframe-container > *{
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
/* Demo styles */
.iframe-container{
margin-top:50px;
width:100%;
}
/*form */
.content{
background-image:url("contact-us (1).jpg");
min-height: 380px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
box-shadow: inset 0 0 0 400px rgba(185, 212, 212, 0.35);
/* Needed to position the navbar */
}
.form-group{
color:white;
}
.no-border {
border: 0;
box-shadow: none; /* You may want to include this as bootstrap applies these styles too */
}
.contact{
color:#BF2626;
font-weight:bold;
margin-top:25px;
}
input,textarea{
margin-left:5px;
}
input:focus{
background-color:#b9dbe2;
color:black;
}
label{
color:black;
margin-top:4px;
}
.code{
color:black;
font-weight:bold;
margin-left:7px;
}
h3{
margin-left:-80px;
}
#securitycode{
color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<script src="formvali.js"></script>
<link rel="stylesheet" href="form.css">
</head>
<body onsubmit="loginload()">
<div class="col-sm-12 content">
<div class="col-sm-1"></div>
<div class="col-sm-4">
<h2 class="text-center">
Fill out this form and we will get back to you<span class="glyphicon glyphicon-hand-right"></span>
</h2>
<!-- <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d7245780.082381814!2d-88.29713116153964!3d27.53212533124578!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88c1766591562abf%3A0xf72e13d35bc74ed0!2sFlorida!5e0!3m2!1sen!2s!4v1470659148428" class="img-responsive" frameborder="0" style="border:0" allowfullscreen></iframe>
-->
<h3 class="text-center"><strong>Bangalore Office</strong></h3>
<iframe src="http://maps.google.com/maps?q=12.987510,77.620491 &z=13&output=embed" width="300" height="200" frameborder="0" style="border:0"></iframe>
<h3 class="text-center"><strong>Kerala Office</strong></h3>
<iframe src="http://maps.google.com/maps?q=9.988126,76.295285 &z=13&output=embed" width="300" height="200" frameborder="0" style="border:0"></iframe>
</div>
<div class="col-sm-6" style="line-height:1.45;">
<h1 class="text-center contact"> Contact Us</h1>
<form action="#" method="POST" id="form_id" name="myform">
<div class="row form-group">
<div class="col-sm-2"></div>
<div class="col-sm-1">
<label>Name</label>
</div>
<div class="col-sm-9">
<input type="text" id="name" class="form-control" placeholder="Enter Your Name">
<i id="nameerror"></i>
</div>
</div><br>
<div class="row form-group">
<div class="col-sm-2"></div>
<div class="col-sm-1">
<label>Mobile</label>
</div>
<div class="col-sm-9">
<input type="text" id="mobile" class="form-control" placeholder="Enter Your Mobile Number">
<i id="moberror"></i>
</div>
</div><br>
<div class="row form-group">
<div class="col-sm-2"></div>
<div class="col-sm-1">
<label style="margin-left:0px;">Email </label>
</div>
<div class="col-sm-9">
<input type="email" id="email" class="form-control"placeholder="Enter Your Email Id">
<i id="emailerror"></i>
</div>
</div><br>
<div class="row form-group">
<div class="col-sm-2"></div>
<div class="col-sm-1">
<label>Country</label>
</div>
<div class="col-sm-9">
<input type="text" id="country" class="form-control" placeholder="Enter Your Country Name">
<i id="countryerror"></i>
</div>
</div><br>
<div class="row form-group">
<div class="col-sm-2"></div>
<div class="col-sm-1">
<label>City</label>
</div>
<div class="col-sm-9">
<input type="text" id="city" class="form-control"placeholder="Enter Your City Name">
<i id="cityerror"></i>
</div>
</div><br>
<div class="row form-group">
<div class="col-sm-2"></div>
<div class="col-sm-1">
<label>Query</label>
</div>
<div class="col-sm-9">
<textarea type="text" class="form-control" id="query"placeholder="Enter Your Query here(optional)"></textarea>
<i id="queryerror"></i>
</div>
</div>
<div class="row form-group">
<div class="col-sm-1"></div>
<div class="col-sm-2"></div>
<div class="col-sm-6">
<span class="code"></strong>Security Code <span id="securitycode"></span></span>
<input type="number" id="security" class="form-control" placeholder="Enter the security code">
<i id="codeerror"></i><br>
<div class="form-group text-center">
<div class="col-sm-2"></div>
<input type="button" class="btn btn-warning" name="sub" value="Submit" onclick="pagetest()"/>
<button id="Button1" style="display:none;">Please wait..</button>
</div>
</div>
</div>
</div>
</form>
<script>
var val =Math.floor(1000 + Math.random() * 9000);
document.getElementById("securitycode").innerHTML = val;
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCXRmYpTXDBP7vdQ-2fy11OqoKGUuGfcxI&callback=initMap">
</script>
</body>
</html>
function pagetest(){
var name= document.getElementById("name").value;
var filt = /^[a-zA-Z]+$/;
if (!name.match(filt)){
document.getElementById("name").style.borderColor="red";
document.getElementById("nameerror").innerHTML='Name should not contain any number or special characters';
document.getElementById("nameerror").style.color='red';
}
else{
document.getElementById("name").style.borderColor="green";
document.getElementById("nameerror").innerHTML='valid name';
document.getElementById("nameerror").style.color='green';
}
var number=document.getElementById("mobile").value;
if(number.length!=10)
{
document.getElementById("mobile").style.borderColor="red";
document.getElementById("moberror").innerHTML="Number should be exactly 10 digits and not less than or more than that";
document.getElementById("moberror").style.color='red';
}
else
{
document.getElementById("mobile").style.borderColor="green";
document.getElementById("moberror").innerHTML="valid number";
document.getElementById("moberror").style.color='green';
}
var email = document.getElementById("email").value;
var filter = /^([a-zA-Z0-9_\.\-])+\#(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,3})+$/;
if (!filter.test(email)) {
document.getElementById("email").style.borderColor="red";
document.getElementById("emailerror").innerHTML="Please provide a valid email address";
document.getElementById("emailerror").style.color="red";
}
else{
document.getElementById("email").style.borderColor="green";
document.getElementById("emailerror").innerHTML='valid email address';
document.getElementById("emailerror").style.color='green';
}
var country= document.getElementById("country").value;
var filt = /^[a-zA-Z]+$/;
if (!country.match(filt)) {
document.getElementById("country").style.borderColor="red";
document.getElementById("countryerror").innerHTML='country should not contain any number or special characters';
document.getElementById("countryerror").style.color='red';
}
else{
document.getElementById("country").style.borderColor="green";
document.getElementById("countryerror").innerHTML='Valid Country name';
document.getElementById("countryerror").style.color='green';
}
var city= document.getElementById("city").value;
var filt = /^[a-zA-Z]+$/;
if (!city.match(filt)) {
document.getElementById("city").style.borderColor="red";
document.getElementById("cityerror").innerHTML='city should not contain any number or special characters';
document.getElementById("cityerror").style.color='red';
}
else{
document.getElementById("city").style.borderColor="green";
document.getElementById("cityerror").innerHTML='Valid city name';
document.getElementById("cityerror").style.color='green';
}
/* var reg = /[^A-Za-z]/;
if ((reg.test(query) == false) && (query ==""))
{
document.getElementById('query').style.borderColor="red";
document.getElementById('queryerror').innerHTML="This field is required";
}
else{
document.getElementById("query").style.borderColor="green";
document.getElementById("queryerror").innerHTML ="";
}*/
var security = document.getElementById("security").value;
var securitycode = document.getElementById("securitycode").innerHTML;
if(security ==securitycode){
document.getElementById("security").style.borderColor="";
document.getElementById("codeerror").innerHTML="Code matched";
document.getElementById("codeerror").style.color='green';
}
else{
document.getElementById("security").style.borderColor="red";
document.getElementById("codeerror").innerHTML="Code didn't match or emplty";
document.getElementById("codeerror").style.color='red';
var val =Math.floor(1000 + Math.random() * 9000);
document.getElementById("securitycode").innerHTML =val;
security.focus;
}
if( (name!="") && (email!="") && (number!="") && (country!="") && (city!="") && (security!="") && (name.match(filt)) && (number.length==10) && (filter.test(email)) && (country.match(filt)) && (city.match(filt)) && (security == securitycode))
{
alert("ok");
$('#submit_btn').val("Please wait");
document.getElementById("form_id").submit();//submit() is a predefined function in js.
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="formvali.js"></script>
<link rel="stylesheet" href="form.css">
</head>
<body onsubmit="loginload()">
<div class="col-sm-12 content">
<div class="col-sm-1"></div>
<div class="col-sm-4">
<h2 class="text-center">
Fill out this form and we will get back to you<span class="glyphicon glyphicon-hand-right"></span>
</h2>
<!-- <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d7245780.082381814!2d-88.29713116153964!3d27.53212533124578!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88c1766591562abf%3A0xf72e13d35bc74ed0!2sFlorida!5e0!3m2!1sen!2s!4v1470659148428" class="img-responsive" frameborder="0" style="border:0" allowfullscreen></iframe>
-->
<h3 class="text-center"><strong>Bangalore Office</strong></h3>
<iframe src="http://maps.google.com/maps?q=12.987510,77.620491 &z=13&output=embed" width="300" height="200" frameborder="0" style="border:0"></iframe>
<h3 class="text-center"><strong>Kerala Office</strong></h3>
<iframe src="http://maps.google.com/maps?q=9.988126,76.295285 &z=13&output=embed" width="300" height="200" frameborder="0" style="border:0"></iframe>
</div>
<div class="col-sm-6" style="line-height:1.45;">
<h1 class="text-center contact"> Contact Us</h1>
<form action="" method="POST" id="form_id" name="myform">
<div class="row form-group">
<div class="col-sm-2"></div>
<div class="col-sm-1">
<label>Name</label>
</div>
<div class="col-sm-9">
<input type="text" id="name" class="form-control" placeholder="Enter Your Name">
<i id="nameerror"></i>
</div>
</div><br>
<div class="row form-group">
<div class="col-sm-2"></div>
<div class="col-sm-1">
<label>Mobile</label>
</div>
<div class="col-sm-9">
<input type="text" id="mobile" class="form-control" placeholder="Enter Your Mobile Number">
<i id="moberror"></i>
</div>
</div><br>
<div class="row form-group">
<div class="col-sm-2"></div>
<div class="col-sm-1">
<label style="margin-left:0px;">Email </label>
</div>
<div class="col-sm-9">
<input type="email" id="email" class="form-control"placeholder="Enter Your Email Id">
<i id="emailerror"></i>
</div>
</div><br>
<div class="row form-group">
<div class="col-sm-2"></div>
<div class="col-sm-1">
<label>Country</label>
</div>
<div class="col-sm-9">
<input type="text" id="country" class="form-control" placeholder="Enter Your Country Name">
<i id="countryerror"></i>
</div>
</div><br>
<div class="row form-group">
<div class="col-sm-2"></div>
<div class="col-sm-1">
<label>City</label>
</div>
<div class="col-sm-9">
<input type="text" id="city" class="form-control"placeholder="Enter Your City Name">
<i id="cityerror"></i>
</div>
</div><br>
<div class="row form-group">
<div class="col-sm-2"></div>
<div class="col-sm-1">
<label>Query</label>
</div>
<div class="col-sm-9">
<textarea type="text" class="form-control" id="query"placeholder="Enter Your Query here(optional)"></textarea>
<i id="queryerror"></i>
</div>
</div>
<div class="row form-group">
<div class="col-sm-1"></div>
<div class="col-sm-2"></div>
<div class="col-sm-6">
<span class="code"></strong>Security Code <span id="securitycode"></span></span>
<input type="number" id="security" class="form-control" placeholder="Enter the security code">
<i id="codeerror"></i><br>
<div class="form-group text-center">
<div class="col-sm-2"></div>
<input type="button" class="btn btn-warning" name="sub" value="Submit" onclick="pagetest()" id="submit_btn"/>
<button id="Button1" style="display:none;">Please wait..</button>
</div>
</div>
</div>
</div>
</form>
<script>
var val =Math.floor(1000 + Math.random() * 9000);
document.getElementById("securitycode").innerHTML = val;
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCXRmYpTXDBP7vdQ-2fy11OqoKGUuGfcxI&callback=initMap">
</script>
</body>
</html>
Replace your pagetest() function with this function code below and check, I'm using jQuery call here after validation check:
function pagetest(){
var name= document.getElementById("name").value;
var filt = /^[a-zA-Z]+$/;
if (!name.match(filt)){
document.getElementById("name").style.borderColor="red";
document.getElementById("nameerror").innerHTML='Name should not contain any number or special characters';
document.getElementById("nameerror").style.color='red';
}
else{
document.getElementById("name").style.borderColor="green";
document.getElementById("nameerror").innerHTML='valid name';
document.getElementById("nameerror").style.color='green';
}
var number=document.getElementById("mobile").value;
if(number.length!=10)
{
document.getElementById("mobile").style.borderColor="red";
document.getElementById("moberror").innerHTML="Number should be exactly 10 digits and not less than or more than that";
document.getElementById("moberror").style.color='red';
}
else
{
document.getElementById("mobile").style.borderColor="green";
document.getElementById("moberror").innerHTML="valid number";
document.getElementById("moberror").style.color='green';
}
var email = document.getElementById("email").value;
var filter = /^([a-zA-Z0-9_\.\-])+\#(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,3})+$/;
if (!filter.test(email)) {
document.getElementById("email").style.borderColor="red";
document.getElementById("emailerror").innerHTML="Please provide a valid email address";
document.getElementById("emailerror").style.color="red";
}
else{
document.getElementById("email").style.borderColor="green";
document.getElementById("emailerror").innerHTML='valid email address';
document.getElementById("emailerror").style.color='green';
}
var country= document.getElementById("country").value;
var filt = /^[a-zA-Z]+$/;
if (!country.match(filt)) {
document.getElementById("country").style.borderColor="red";
document.getElementById("countryerror").innerHTML='country should not contain any number or special characters';
document.getElementById("countryerror").style.color='red';
}
else{
document.getElementById("country").style.borderColor="green";
document.getElementById("countryerror").innerHTML='Valid Country name';
document.getElementById("countryerror").style.color='green';
}
var city= document.getElementById("city").value;
var filt = /^[a-zA-Z]+$/;
if (!city.match(filt)) {
document.getElementById("city").style.borderColor="red";
document.getElementById("cityerror").innerHTML='city should not contain any number or special characters';
document.getElementById("cityerror").style.color='red';
}
else{
document.getElementById("city").style.borderColor="green";
document.getElementById("cityerror").innerHTML='Valid city name';
document.getElementById("cityerror").style.color='green';
}
/* var reg = /[^A-Za-z]/;
if ((reg.test(query) == false) && (query ==""))
{
document.getElementById('query').style.borderColor="red";
document.getElementById('queryerror').innerHTML="This field is required";
}
else{
document.getElementById("query").style.borderColor="green";
document.getElementById("queryerror").innerHTML ="";
}*/
var security = document.getElementById("security").value;
var securitycode = document.getElementById("securitycode").innerHTML;
if(security ==securitycode){
document.getElementById("security").style.borderColor="";
document.getElementById("codeerror").innerHTML="Code matched";
document.getElementById("codeerror").style.color='green';
}
else{
document.getElementById("security").style.borderColor="red";
document.getElementById("codeerror").innerHTML="Code didn't match or emplty";
document.getElementById("codeerror").style.color='red';
var val =Math.floor(1000 + Math.random() * 9000);
document.getElementById("securitycode").innerHTML =val;
security.focus;
}
$('#Button1').hide();
$('input[name=sub]').show();
if( (name!="") && (email!="") && (number!="") && (country!="") && (city!="") && (security!=""))
{
$('#Button1').show();
$('input[name=sub]').hide();
// $('#form_id').submit(); //uncomment if want to submit after validation
}
}
I'm trying to make a MODAL step by step validating each step, but I can only validate the input with error, but I can not validate the select.
wanted that when the value of the select is equal to ZERO (0) the validation occurs as well.
Could someone help me with this JS? I would be extremely grateful.
$(document).ready(function () {
var navListItems = $('div.setup-panel div a'),
allWells = $('.setup-content'),
allNextBtn = $('.nextBtn');
allWells.hide();
navListItems.click(function (e) {
e.preventDefault();
var $target = $($(this).attr('href')),
$item = $(this);
if (!$item.hasClass('disabled')) {
navListItems.removeClass('btn-primary').addClass('btn-default');
$item.addClass('btn-primary');
allWells.hide();
$target.show();
$target.find('input:eq(0)').focus();
$target.find('select:eq(0)').focus();
}
});
allNextBtn.click(function(){
var curStep = $(this).closest(".setup-content"),
curStepBtn = curStep.attr("id"),
nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"),
curInputs = curStep.find("input[type='text'],input[type='url'],select[type='text']"),
isValid = true;
$(".form-group").removeClass("has-error");
for(var i=0; i<curInputs.length; i++){
if (!curInputs[i].validity.valid){
isValid = false;
$(curInputs[i]).closest(".form-group").addClass("has-error");
}
}
if (isValid)
nextStepWizard.removeAttr('disabled').trigger('click');
});
$('div.setup-panel div a.btn-primary').trigger('click');
});
<div class="container">
<div class="row">
<h2>Multistep form wizard on modal</h2>
<div class="center"><button data-toggle="modal" data-target="#requestform" class="btn btn-primary center-block">Click Me</button></div>
</div>
</div>
<div class="modal fade" id="requestform" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h3 class="modal-title" id="lineModalLabel">Proposta</h3>
</div>
<div class="modal-body">
<!-- Steps starts here -->
<div class="requestwizard">
<div class="requestwizard-row setup-panel">
<div class="requestwizard-step">
1
<p>Selecione um contato</p>
</div>
<div class="requestwizard-step">
2
<p>Selecione um curso</p>
</div>
<div class="requestwizard-step">
3
<p>Forma de pagamento</p>
</div>
</div>
</div>
<br>
<form role="form">
<div class="row setup-content" id="step-1">
<div class="col-xs-12">
<div class="col-md-12">
<div class="form-group">
<input maxlength="100" type="text" required="required" class="form-control" placeholder="Contato" />
</div>
<hr>
<button class="btn btn-primary nextBtn btn-lg pull-right" type="button" >Próximo</button>
</div>
</div>
</div>
<div class="row setup-content" id="step-2">
<div class="col-xs-12">
<div class="col-md-12">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<select class="form-control custom-select" id="filtercountry">
<option value="0" class="selectcountry">Country</option>
<option value="201" class="selectcountry">Australia</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<select class="form-control custom-select" id="filtercity">
<option value="0" class="selectcity">City</option>
<option value="101" class="selectcity">California</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<select class="form-control custom-select" id="filterregion">
<option value="0" class="selectregion">Region</option>
<option value="3" class="selectregion">Brazil</option>
</select>
</div>
</div>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<input maxlength="200" type="text" required="required" class="form-control" placeholder="Curso" />
</div>
<button class="btn btn-primary nextBtn btn-lg pull-right" type="button" >Próximo</button>
</div>
</div>
</div>
<div class="row setup-content" id="step-3">
<div class="col-xs-12">
<div class="col-md-12">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label class="control-label"><spring:message code="label.firstinstallment"/></label>
<input type="text" class="form-control" placeholder="First installment" id="finstallment" name="finstallment" required>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="control-label"><spring:message code="label.numberparcels"/></label>
<select class="form-control custom-select" name="parcels" required>
<option value="0">0</option>
<option value="1">1</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="control-label"><spring:message code="label.firstinvoice"/></label>
<input type="date" class="form-control" placeholder="Invoice maturity" name="expiration_date" required>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label class="control-label"><spring:message code="label.selectpaymentplan"/></label>
<select class="form-control custom-select" name="payment_plan" required>
<option value="1">Bank slip</option>
</select>
</div>
</div>
</div>
<button class="btn btn-primary nextBtn btn-lg pull-right" type="button" >Enviar</button>
</div>
</div>
</div>
</form>
<!-- Form ends here -->
</div>
</div>
</div>
</div>
you need to check for the control type in the for loop inside allNextBtn.click event like this:
for(var i=0; i<curInputs.length; i++){
//if the control is select check the selected index if it is ZERO
if ( $(curInputs[i]).is('select') && (curInputs[i].selectedIndex === 0)
{
isValid = false;
}
//else check control validity
else if (!curInputs[i].validity.valid)
{
isValid = false;
}
if(!isValid)
{
$(curInputs[i]).closest(".form-group").addClass("has-error");
}
}
and change this line:
curInputs = curStep.find("input[type='text'],input[type='url'],select[type='text']"),
to this:
curInputs = curStep.find("input[type='text'],input[type='url'],select"),
here is the full js code:
$(document).ready(function () {
var navListItems = $('div.setup-panel div a'),
allWells = $('.setup-content'),
allNextBtn = $('.nextBtn');
allWells.hide();
navListItems.click(function (e) {
e.preventDefault();
var $target = $($(this).attr('href')),
$item = $(this);
if (!$item.hasClass('disabled')) {
navListItems.removeClass('btn-primary').addClass('btn-default');
$item.addClass('btn-primary');
allWells.hide();
$target.show();
$target.find('input:eq(0)').focus();
$target.find('select:eq(0)').focus();
}
});
allNextBtn.click(function(){
var curStep = $(this).closest(".setup-content"),
curStepBtn = curStep.attr("id"),
nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"),
curInputs = curStep.find("input[type='text'],input[type='url'],select"),
isValid = true;
$(".form-group").removeClass("has-error");
//BEGIN EDIT
for(var i=0; i<curInputs.length; i++){
//if the control is select check the selected index if it is ZERO
if ( $(curInputs[i]).is('select') && (curInputs[i].selectedIndex === 0))
{
isValid = false;
}
//else check control validity
else if (!curInputs[i].validity.valid)
{
isValid = false;
}
if(!isValid)
{
$(curInputs[i]).closest(".form-group").addClass("has-error");
}
}
//END EDIT
if (isValid)
nextStepWizard.removeAttr('disabled').trigger('click');
});
$('div.setup-panel div a.btn-primary').trigger('click');
});
I'm trying to learn Bootstrap / play around with Bootsnipp.
I have copied the HTML, CSS and JS from the link (although I think I have redundancy here): http://bootsnipp.com/snippets/e3MBM
1) Is it Redundant to add the CDN link and the actual CSS and JS (From what I understand the latter would only be if I host the CSS and JS files locally? Can someone confirm this?
2)The damn thing doesn't work the way it is supposed to:
Is theirs - with each step shown separately.
Mine, on the other hand has everything together:
It's probably something so stupid and simple, but I have no idea.Can someone please help?
I tried JSFiddle *First time using it, looks easy, but I hope I've got it right :)
<!DOCTYPE HTML>
https://jsfiddle.net/vvstafo2/1/
You forgot to add bootstrap JS and CSS file thats why its conflict over there, Would you please once try with the below code?
$(document).ready(function () {
var navListItems = $('div.setup-panel div a'),
allWells = $('.setup-content'),
allNextBtn = $('.nextBtn');
allWells.hide();
navListItems.click(function (e) {
e.preventDefault();
var $target = $($(this).attr('href')),
$item = $(this);
if (!$item.hasClass('disabled')) {
navListItems.removeClass('btn-primary').addClass('btn-default');
$item.addClass('btn-primary');
allWells.hide();
$target.show();
$target.find('input:eq(0)').focus();
}
});
allNextBtn.click(function(){
var curStep = $(this).closest(".setup-content"),
curStepBtn = curStep.attr("id"),
nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"),
curInputs = curStep.find("input[type='text'],input[type='url']"),
isValid = true;
$(".form-group").removeClass("has-error");
for(var i=0; i<curInputs.length; i++){
if (!curInputs[i].validity.valid){
isValid = false;
$(curInputs[i]).closest(".form-group").addClass("has-error");
}
}
if (isValid)
nextStepWizard.removeAttr('disabled').trigger('click');
});
$('div.setup-panel div a.btn-primary').trigger('click');
});
body {
margin-top:40px;
}
.stepwizard-step p {
margin-top: 10px;
}
.stepwizard-row {
display: table-row;
}
.stepwizard {
display: table;
width: 50%;
position: relative;
}
.stepwizard-step button[disabled] {
opacity: 1 !important;
filter: alpha(opacity=100) !important;
}
.stepwizard-row:before {
top: 14px;
bottom: 0;
position: absolute;
content: " ";
width: 100%;
height: 1px;
background-color: #ccc;
z-order: 0;
}
.stepwizard-step {
display: table-cell;
text-align: center;
position: relative;
}
.btn-circle {
width: 30px;
height: 30px;
text-align: center;
padding: 6px 0;
font-size: 12px;
line-height: 1.428571429;
border-radius: 15px;
}
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<link rel="stylesheet" href="http://bootsnipp.com/dist/bootsnipp.min.css?ver=7d23ff901039aef6293954d33d23c066">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="http://bootsnipp.com/dist/scripts.min.js"></script>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<div class="container">
<div class="stepwizard col-md-offset-3">
<div class="stepwizard-row setup-panel">
<div class="stepwizard-step">
1
<p>Step 1</p>
</div>
<div class="stepwizard-step">
2
<p>Step 2</p>
</div>
<div class="stepwizard-step">
3
<p>Step 3</p>
</div>
</div>
</div>
<form role="form" action="" method="post">
<div class="row setup-content" id="step-1">
<div class="col-xs-6 col-md-offset-3">
<div class="col-md-12">
<h3> Step 1</h3>
<div class="form-group">
<label class="control-label">First Name</label>
<input maxlength="100" type="text" required="required" class="form-control" placeholder="Enter First Name" />
</div>
<div class="form-group">
<label class="control-label">Last Name</label>
<input maxlength="100" type="text" required="required" class="form-control" placeholder="Enter Last Name" />
</div>
<div class="form-group">
<label class="control-label">Address</label>
<textarea required="required" class="form-control" placeholder="Enter your address" ></textarea>
</div>
<button class="btn btn-primary nextBtn btn-lg pull-right" type="button" >Next</button>
</div>
</div>
</div>
<div class="row setup-content" id="step-2">
<div class="col-xs-6 col-md-offset-3">
<div class="col-md-12">
<h3> Step 2</h3>
<div class="form-group">
<label class="control-label">Company Name</label>
<input maxlength="200" type="text" required="required" class="form-control" placeholder="Enter Company Name" />
</div>
<div class="form-group">
<label class="control-label">Company Address</label>
<input maxlength="200" type="text" required="required" class="form-control" placeholder="Enter Company Address" />
</div>
<button class="btn btn-primary nextBtn btn-lg pull-right" type="button" >Next</button>
</div>
</div>
</div>
<div class="row setup-content" id="step-3">
<div class="col-xs-6 col-md-offset-3">
<div class="col-md-12">
<h3> Step 3</h3>
<button class="btn btn-success btn-lg pull-right" type="submit">Submit</button>
</div>
</div>
</div>
</form>
</div>