'Required field validation not working in html step form
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>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|