I made a multi step form with html/css/js. Now in the second step when I click Next I need the E-mail field to be validated. The "email" type attribute in html doesn't work and IDK why. I also need the Phone Number to be optional. PLEASE HELP !
Here is the code for HTML, CSS and JS:
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";
// ... 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 displays 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 to the current step:
x[n].className += " active";
}/* Style the form */
@media (max-width: 981px) {
.first-h {
display: none;
}
.first-p {
display: none;
}
}
@media (max-width: 571px) {
#regForm {
height: fit-content !important;
width: fit-content !important;
}
.name-h {
font-size: 26px !important;
margin-bottom: 40px !important;
}
#prevBtn {
color: rgb(202, 202, 202) !important;
font-size: 18px !important;
padding: 5px 15px !important;
font-weight: 100 !important;
border: 1px solid #f05b5b9f !important;
}
#nextBtn {
font-size: 18px !important;
padding: 5px 35px !important;
margin-top: 40px !important;
font-weight: 100 !important;
border: 1px solid #f55858 !important;
}
input::placeholder {
font-size: 12px;
}
}
#regForm {
background-color: rgb(54, 54, 54);
border-radius: 10px;
margin-top: 150px !important;
padding: 40px;
width: 70%;
height: auto;
min-width: 300px;
}
.first-h {
letter-spacing: 1px;
text-align: center;
margin: 10px auto 35px auto;
animation-duration: 2s;
}
.name-h {
letter-spacing: 1px;
text-align: center;
margin: 10px auto 35px auto;
font-size: 26px;
color: #f55858 !important;
}
.first-p {
background-color: #f558581a;
text-align: center;
margin: 0 auto 30px auto;
font-size: 20px;
font-weight: 400;
padding: 15px 5px;
border-top: 1px solid #f55858;
border-bottom: 1px solid #f55858;
animation-duration: 2s;
}
/* Style the input fields */
input {
padding: 10px;
color: #fff;
background-color: #3f3f3f;
margin-bottom: 15px;
width: 100%;
font-size: 17px;
font-family: Raleway;
border: 1px solid #424242;
border-bottom-right-radius: 20px;
}
input::placeholder {
color: #e2e2e298;
}
input:focus {
outline: none;
}
textarea {
padding: 10px;
color: #fff;
background-color: #3f3f3f;
margin-bottom: 15px;
width: 100%;
font-size: 17px;
font-family: Raleway;
border: 1px solid #424242;
border-bottom-right-radius: 20px;
}
textarea::placeholder {
color: #e2e2e298;
}
textarea:focus {
outline: none;
}
/* Mark input boxes that gets an error on validation: */
input.invalid {
background-color: #a04e4e85;
}
/* Hide all steps by default: */
.tab {
display: none;
}
/* Make circles that indicate the steps of the form: */
.step {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbbbbb;
border: none;
border-radius: 50%;
display: inline-block;
opacity: 0.5;
}
/* Mark the active step: */
.step.active {
opacity: 1;
}
/* Mark the steps that are finished and valid: */
.step.finish {
background-color: #f55858;
}
#nextBtn {
font-size: 12px;
margin-top: 20px;
font-weight: 700 !important;
border: 3px solid #f55858;
border-radius: 20px;
padding: 10px 30px;
margin-left: 10px;
background-color: rgb(44, 44, 44);
box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.15);
text-transform: uppercase;
letter-spacing: 1;
color: #fff;
letter-spacing: 0.25px;
-webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.4s ease 0s;
}
#nextBtn:hover {
background-color: #1a1919d0;
border: 3px solid #ecececb9;
color: #ecececb9;
}
#nextBtn:focus {
outline: none;
border: 3px dotted #ececec56;
}
#prevBtn {
font-size: 12px;
margin-top: 20px;
font-weight: 700 !important;
border: 3px solid #f05b5b9f;
border-radius: 20px;
padding: 10px 30px;
margin-left: 10px;
background-color: rgb(44, 44, 44);
box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.15);
text-transform: uppercase;
letter-spacing: 1;
color: #fff;
letter-spacing: 0.25px;
-webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.4s ease 0s;
}
#prevBtn:hover {
background-color: #1a1919d0;
border: 3px solid #ececec56;
color: #ecececb9;
}
#prevBtn:focus {
outline: none;
border: 3px dotted #ececec56;
}<form id="regForm" method="POST" action="https://formspree.io/f/xnqopyzd">
<h1 class="animate__animated animate__zoomIn first-h">HI THERE</h1>
<p class="animate__animated animate__zoomIn first-p">AC.IE would love to hear from you. Introduce yourself, let us know what your project is about and we can support your innovative idea or collaborate as partners. </p>
<!-- One "tab" for each step in the form: -->
<div class="animate__animated animate__zoomIn tab">
<h1 class="name-h">Let's start with your name:</h1>
<p><input required name="First Name" placeholder="Type your name" oninput="this.className = ''"></p>
<p><input required name="Last Name" placeholder="Type your last name" oninput="this.className = ''"></p>
</div>
<div class="animate__animated animate__fadeIn tab">
<h1 class="animate__animated animate__backInLeft name-h">and your contact...</h1>
<p><input required type="email" name="E-mail" placeholder="Enter your E-mail" oninput="this.className = ''"></p>
<p><input class="optional" type="tel" name="Phone Number" placeholder="Enter your Phone Number (Optional)" oninput="this.className = ''"></p>
</div>
<div class="animate__animated animate__fadeIn tab">
<h1 class="animate__animated animate__backInLeft name-h">Organization. Tell us the company/org name and also in what position you're in.</h1>
<p><input name="work" placeholder="Type 'none' to skip" oninput="this.className = ''"></p>
</div>
<div class="animate__animated animate__fadeIn tab">
<h1 class="animate__animated animate__backInLeft name-h">Where do you live ?</h1>
<p><input name="country" placeholder="Enter your city & country" oninput="this.className = ''"></p>
</div>
<div class="animate__animated animate__fadeIn tab">
<h1 class="animate__animated animate__backInLeft name-h">Enter your Social Media</h1>
<p><input name="social" placeholder="@instagram, @twitter, @facebook etc.." oninput="this.className = ''"></p>
</div>
<div class="animate__animated animate__fadeIn tab">
<h1 class="animate__animated animate__backInLeft name-h">Tell us about yourself and also why is your idea socially innovative?</h1>
<p><textarea name="idea" type="text" placeholder="Type your message here. Talk a little bit about yourself and your idea.." oninput="this.className = ''"></textarea></p>
</div>
<div style="overflow:auto;">
<div style="float:right;">
<button type="button" class="animate__animated animate__fadeIn" id="prevBtn" onclick="nextPrev(-1)">Previous</button>
<button type="button" class="animate__animated animate__zoomIn" id="nextBtn" onclick="nextPrev(1)">Next</button>
</div>
</div>
<!-- Circles which indicates the steps of the form: -->
<div style="text-align:center;margin-top:140px;">
<span class="step"></span>
<span class="step"></span>
<span class="step"></span>
<span class="step"></span>
<span class="step"></span>
<span class="step"></span>
</div>
</form>You can run the code and see it. Please help me. Please help me. Please help me. Please help me. Please help me. !
