Multi-Step form with validation
Last active
July 29, 2020 15:38
-
-
Save rajibdpi/ecc89af97e2b068946c9bf37cbd97572 to your computer and use it in GitHub Desktop.
Bootstrap 4 Multi-Step Form
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<h1 class="bg-info text-white text-center p-2 fixed-top">Bootstrap 4 Multi-step form</h1> | |
<main class="content" role="content"> | |
<section id="section1"> | |
<div class="container-fluid col-md-6 col-md-offset-3"> | |
<!-- MultiStep Form --> | |
<form id="regForm" action="/submit_page.php"> | |
<h1>Register:</h1> | |
<!-- One "tab" for each step in the form: --> | |
<div class="tab">Name: | |
<p><input placeholder="First name..." oninput="this.className = ''" name="fname"></p> | |
<p><input placeholder="Last name..." oninput="this.className = ''" name="lname"></p> | |
</div> | |
<div class="tab">Contact Info: | |
<p><input placeholder="E-mail..." oninput="this.className = ''" name="email"></p> | |
<p><input placeholder="Phone..." oninput="this.className = ''" name="phone"></p> | |
</div> | |
<div class="tab">Birthday: | |
<p><input placeholder="dd" oninput="this.className = ''" name="dd"></p> | |
<p><input placeholder="mm" oninput="this.className = ''" name="nn"></p> | |
<p><input placeholder="yyyy" oninput="this.className = ''" name="yyyy"></p> | |
</div> | |
<div class="tab">Login Info: | |
<p><input placeholder="Username..." oninput="this.className = ''" name="uname"></p> | |
<p><input placeholder="Password..." oninput="this.className = ''" name="pword" type="password"></p> | |
</div> | |
<div style="overflow:auto;"> | |
<div style="float:right;"> | |
<button type="button" id="prevBtn" onclick="nextPrev(-1)">Previous</button> | |
<button type="button" id="nextBtn" onclick="nextPrev(1)">Next</button> | |
</div> | |
</div> | |
<!-- Circles which indicates the steps of the form: --> | |
<div style="text-align:center;margin-top:40px;"> | |
<span class="step"></span> | |
<span class="step"></span> | |
<span class="step"></span> | |
<span class="step"></span> | |
</div> | |
</form> | |
<!-- /.MultiStep Form --> | |
</div> | |
</section> | |
</main> <!-- /content --> | |
<!-- alerts are for fun of it --> | |
<div class="alerts-container"> | |
<div class="row"> | |
<div id="timed-alert" class="alert alert-info animated tada" role="alert"> | |
<span id="time"></span> | |
</div> | |
</div> | |
<div class="row"> | |
<div id="click-alert" class="alert alert-warning" role="alert"> | |
</div> | |
</div> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$(document).ready(function() { | |
// Random Alert shown for the fun of it | |
function randomAlert() { | |
var min = 5, | |
max = 20; | |
var rand = Math.floor(Math.random() * (max - min + 1) + min); //Generate Random number between 5 - 20 | |
// post time in a <span> tag in the Alert | |
$("#time").html('Next alert in ' + rand + ' seconds'); | |
$('#timed-alert').fadeIn(500).delay(3000).fadeOut(500); | |
setTimeout(randomAlert, rand * 1000); | |
}; | |
randomAlert(); | |
}); | |
$('.btn').click(function(event) { | |
event.preventDefault(); | |
var target = $(this).data('target'); | |
// console.log('#'+target); | |
$('#click-alert').html('data-target= ' + target).fadeIn(50).delay(3000).fadeOut(1000); | |
}); | |
// Multi-Step Form | |
var currentTab = 0; // Current tab is set to be the first tab (0) | |
showTab(currentTab); // Display the crurrent tab | |
function showTab(n) { | |
// This function will display the specified tab of the form... | |
var x = document.getElementsByClassName("tab"); | |
x[n].style.display = "block"; | |
//... and fix the Previous/Next buttons: | |
if (n == 0) { | |
document.getElementById("prevBtn").style.display = "none"; | |
} else { | |
document.getElementById("prevBtn").style.display = "inline"; | |
} | |
if (n == (x.length - 1)) { | |
document.getElementById("nextBtn").innerHTML = "Submit"; | |
} else { | |
document.getElementById("nextBtn").innerHTML = "Next"; | |
} | |
//... and run a function that will display the correct step indicator: | |
fixStepIndicator(n) | |
} | |
function nextPrev(n) { | |
// This function will figure out which tab to display | |
var x = document.getElementsByClassName("tab"); | |
// Exit the function if any field in the current tab is invalid: | |
if (n == 1 && !validateForm()) return false; | |
// Hide the current tab: | |
x[currentTab].style.display = "none"; | |
// Increase or decrease the current tab by 1: | |
currentTab = currentTab + n; | |
// if you have reached the end of the form... | |
if (currentTab >= x.length) { | |
// ... the form gets submitted: | |
document.getElementById("regForm").submit(); | |
return false; | |
} | |
// Otherwise, display the correct tab: | |
showTab(currentTab); | |
} | |
function validateForm() { | |
// This function deals with validation of the form fields | |
var x, y, i, valid = true; | |
x = document.getElementsByClassName("tab"); | |
y = x[currentTab].getElementsByTagName("input"); | |
// A loop that checks every input field in the current tab: | |
for (i = 0; i < y.length; i++) { | |
// If a field is empty... | |
if (y[i].value == "") { | |
// add an "invalid" class to the field: | |
y[i].className += " invalid"; | |
// and set the current valid status to false | |
valid = false; | |
} | |
} | |
// If the valid status is true, mark the step as finished and valid: | |
if (valid) { | |
document.getElementsByClassName("step")[currentTab].className += " finish"; | |
} | |
return valid; // return the valid status | |
} | |
function fixStepIndicator(n) { | |
// This function removes the "active" class of all steps... | |
var i, x = document.getElementsByClassName("step"); | |
for (i = 0; i < x.length; i++) { | |
x[i].className = x[i].className.replace(" active", ""); | |
} | |
//... and adds the "active" class on the current step: | |
x[n].className += " active"; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/*custom font*/ | |
@import url(import url here); | |
body { | |
/*font: normal 1em 'font';*/ | |
background-color: #ecfab6; | |
} | |
main { | |
/* margin-top: 4.5em; */ | |
} | |
#section1 { | |
height: 30em; | |
} | |
/* Multi-Step Form */ | |
* { | |
box-sizing: border-box; | |
} | |
#regForm { | |
background-color: #fff; | |
margin: 100px auto; | |
font-family: Raleway; | |
padding: 40px; | |
width: 100%; | |
min-width: 600px; | |
} | |
h1 { | |
text-align: center; | |
} | |
input { | |
padding: 10px; | |
width: 100%; | |
font-size: 17px; | |
font-family: Raleway; | |
border: 1px solid #aaaaaa; | |
} | |
/* Mark input boxes that get errors during validation: */ | |
input.invalid { | |
background-color: #ffdddd; | |
} | |
/* Hide all steps by default: */ | |
.tab { | |
display: none; | |
} | |
button { | |
background-color: #4CAF50; | |
color: #ffffff; | |
border: none; | |
padding: 10px 20px; | |
font-size: 17px; | |
font-family: Raleway; | |
cursor: pointer; | |
} | |
button:hover { | |
opacity: 0.8; | |
} | |
#prevBtn { | |
background-color: #bbbbbb; | |
} | |
/* Step marker: Place in the form. */ | |
.step { | |
height: 15px; | |
width: 15px; | |
margin: 0 2px; | |
background-color: #bbbbbb; | |
border: none; | |
border-radius: 50%; | |
display: inline-block; | |
opacity: 0.5; | |
} | |
.step.active { | |
opacity: 1; | |
} | |
/* Mark the steps that are finished and valid: */ | |
.step.finish { | |
background-color: #4CAF50; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" /> | |
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> | |
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment