'How can I validate and stop empty form in multistep form?
I've added a multistep bootstrap from in my project.But Now I want to do a simple validation that is if any of field is empty my from won't go to next step and I will show a simple javascript alert message. I'm trying to solve this using javascript. For trial first I've taken id of a input element and checking that element is empty or not. But the approach I'm doing that is not working.
$(function(){
var current_fs, next_fs, previous_fs; //fieldsets
var opacity;
$(".next").click(function(){
current_fs = $(this).parent();
next_fs = $(this).parent().next();
//Add Class Active
$("#progressbar li").eq($("fieldset").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});
},
duration: 600
});
}
);
$(".previous").click(function(){
current_fs = $(this).parent();
previous_fs = $(this).parent().prev();
//Remove class active
$("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");
//show the previous fieldset
previous_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'
});
previous_fs.css({'opacity': opacity});
},
duration: 600
});
});
$('.radio-group .radio').click(function(){
$(this).parent().find('.radio').removeClass('selected');
$(this).addClass('selected');
});
$(".submit").click(function(){
return false;
})
});
#msform {
text-align: center;
position: relative;
margin-top: 20px
}
#msform fieldset .form-card {
background: white;
border: 0 none;
border-radius: 0px;
box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.2);
padding: 20px 40px 30px 40px;
box-sizing: border-box;
width: 94%;
margin: 0 3% 20px 3%;
position: relative
}
#msform fieldset {
background: white;
border: 0 none;
border-radius: 0.5rem;
box-sizing: border-box;
width: 100%;
margin: 0;
padding-bottom: 20px;
position: relative
}
#msform fieldset:not(:first-of-type) {
display: none
}
#msform fieldset .form-card {
text-align: left;
color: #9E9E9E
}
#msform input.msform,
#msform textarea {
padding: 0px 8px 4px 8px;
border: none;
border-bottom: 1px solid #ccc;
border-radius: 0px;
margin-bottom: 25px;
margin-top: 2px;
width: 100%;
box-sizing: border-box;
font-family: montserrat;
color: #2C3E50;
font-size: 16px;
letter-spacing: 1px
}
#msform input.msform:focus,
#msform textarea:focus {
-moz-box-shadow: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
border: none;
font-weight: bold;
border-bottom: 2px solid skyblue;
outline-width: 0
}
#msform .action-button {
width: 130px;
background: #ff00bf;
font-weight: bold;
color: white;
border: 0 none;
border-radius: 25px;
cursor: pointer;
padding: 10px 5px;
margin: 10px 5px
}
#msform .action-button:hover,
#msform .action-button:focus {
box-shadow: 0 0 0 2px white, 0 0 0 3px skyblue
}
#msform .action-button-previous {
width: 130px;
background: #00ffff;
font-weight: bold;
color: black;
border: 0 none;
border-radius: 25px;
cursor: pointer;
padding: 10px 5px;
margin: 10px 5px
}
#msform .action-button-previous:hover,
#msform .action-button-previous:focus {
box-shadow: 0 0 0 2px white, 0 0 0 3px #616161
}
select.list-dt {
border: none;
outline: 0;
border-bottom: 1px solid #ccc;
padding: 2px 5px 3px 5px;
margin: 2px
}
select.list-dt:focus {
border-bottom: 2px solid skyblue
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="{{asset('Frontend/assets/img/header/favicon_io/android-chrome-192x192.png')}}">
<!-- Bootstrap CSS -->
<link href='https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css' rel='stylesheet'>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="crossorigin="anonymous"referrerpolicy="no-referrer"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<title>Form Validate</title>
</head>
<body>
<section class="pt-5 pb-5">
<div class="container">
<div class="row regirstration-row">
<div class="container-fluid" id=" ">
<div class="row justify-content-center mt-0">
<div class="registration-form-card-body col-11 col-sm-9 col-md-7 col-lg-6 text-center p-0 mt-3 mb-2">
<div class="registration-form-card card px-0 pt-4 pb-0 mt-3 mb-3">
<h2><strong>Sign Up Your User Account</strong></h2>
<p>Fill all form field to go to next step</p>
<div class="row">
<div class="col-md-12 mx-0">
<form method="POST" action=" " class="needs-validation" id="msform" enctype="multipart/form-data">
<!-- progressbar -->
<ul class=" " id="progressbar">
<li class="active" id="account">
<strong>Account</strong>
</li>
<li id="personal"><strong>Personal</strong></li>
<li id="confirm"><strong>Finish</strong></li>
</ul>
<!-- fieldsets -->
<fieldset>
<div class="form-card">
<div class="col-md-12">
<label for="userName" class="form-label">User Name</label>
<input type="text" name="name" class="form-control msform" id="userName" required>
</div>
<div class="col-md-12">
<label for="phone" class="form-label">Phone No.</label>
<input type="tel" name="phone" class="form-control msform" id="phone">
</div>
<div class="col-md-12">
<label for="email" class="form-label">Email</label>
<input type="email" name="email" class="form-control msform" id="email">
</div>
<div class="col-md-12">
<div class="input-group mb-3">
<div class="custom-file">
<label class="custom-file-label" for="profilePicture">Add Profile Picture</label>
<br>
<input type="file" name="n_photo" class="custom-file-input" id="profilePicture">
</div>
</div>
</div>
<div class="col-md-12">
<label for="password" class="form-label">Password</label>
<input type="password" name="password" class="form-control msform" id="password">
</div>
<div class="col-md-12">
<label for="confirmPassword" class="form-label">Confirm Password</label>
<input type="password" name="password_confirmation" class="form-control msform msform" id="confirmPassword">
</div>
</div>
<input type="button" name="next" class="next action-button" value="Next Step" id="firstForm"/>
</fieldset>
<fieldset>
<div class="form-card">
<h2 class="fs-title">Personal Information</h2>
<div class="col-12">
<label for="fName" class="form-label">Father's Name</label>
<input type="text" name="father_name" class="form-control msform" id="fName" placeholder="">
</div>
<div class="col-12">
<label for="mName" class="form-label">Mother's Name</label>
<input type="text" name="mother_name" class="form-control msform" id="mName" placeholder="">
</div>
<div class="col-12">
<label for="mName" class="form-label">Date of Birth</label>
<input class="msform" name="date_of_birth" type="date" name="dob" placeholder=" " />
</div>
<div class="col-12">
<label for="address" class="form-label">Address</label>
<input class="msform" name="address" id="address" type="text" name="address"/>
</div>
<div class="col-md-12">
<label for="nationality" class="form-label">Nationality</label>
<input type="text" name="nationality" class="form-control msform" id="nationality">
</div>
<div class="col-md-12">
<label for="genderInput" class="form-label">Gender</label>
<select id="genderInput" name="gender" class="form-select msform">
<option selected>Gender</option>
<option value="Male">Male</option>
<option value="Female"> Female</option>
<option value="Other"> Other</option>
</select>
</div>
<div class="col-md-12 mt-2">
<label for="favQuestion" class="form-label">Choose Security Question</label>
<select id="favQuestion" name="security_question" class="form-select msform">
<option selected>Choose Security Question</option>
<option value="favourite_color">Your Favourite Color?</option>
<option value="favourite_pet"> Your Favourite Pet?</option>
<option value="favourite_place"> Your Favourite Place?</option>
</select>
</div>
<div class="col-md-12 mt-2">
<label for="favourite_ans" class="form-label">Type Your Answer</label>
<input type="text" name="favourite_ans" class="form-control msform" id="favourite_ans">
</div>
<div class="col-12 mt-3 mb-3">
<div class="custom-file" data-toggle="tooltip" data-placement="top" title="Upload Scanned Copy of your Birth Certificate/NID/Driving License/Passport">
<label class="custom-file-label" for="inputGroupFile03">Add Photo ID</label>
<input type="file" name="photo" class="custom-file-input" id="inputGroupFile03">
</div>
</div>
<div class="col-12 pl-3">
<div class="form-check">
<input class="form-check-input ml-1 mr-1" type="checkbox" id="gridCheck">
<label class="form-check-label" for="gridCheck">
Agree to our <a href="#">terms & conditions</a>
</label>
</div>
</div>
</div>
<input type="button" name="previous" class="previous action-button-previous" value="Previous" />
<input type="submit" name="next" class="next action-button" value="Next Step" />
</fieldset>
<fieldset>
<div class="form-card">
<h2 class="fs-title text-center">Success !</h2>
<br /><br />
<div class="row justify-content-center">
<div class="col-3">
<img src="https://img.icons8.com/color/96/000000/ok--v2.png" class="fit-image" />
</div>
</div>
<br /><br />
<div class="row justify-content-center">
<div class="col-7 text-center">
<h5>You Have Successfully Signed Up</h5>
</div>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script>
var userName = document.getElementById("userName").value;
var firstForm = document.getElementById("firstForm");
firstForm.addEventListener('click', e=>{
if (userName == "") {
console.log(firstForm);
firstForm.disabled = true;
}else{
console.log('ok');
}
})
</script>
</body>
</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 |
|---|