I am making a registration form; while making a validation if a field fails the validation test, for eg- If I have not entered the first name, it gives the alert but along with that it gives alerts for all those fields that are empty. I want to send the control to only that field which failed the validation test.In this case First Name. Here's my code:
<!DOCTYPE HTML>
<html>
<head>
<title>Assignment-2</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/jquery.validate.js"></script>
</head>
<body style="background-color:powderblue;">
<h3>
<marquee style="color : Green;">Please Fill all the details correctly</marquee>
</h3><br>
<div class="container-fluid">
<div class="row">
<div class="col-sm-2 col-md-2"></div>
<div class="col-sm-8 col-md-8">
<div class="row">
<div class="col-sm-12 col-md-12">
<h3 class="align-middle">Registration Form</h3>
</div>
<div class="col-sm-12 col-md-12">
<div class="row">
<div class="col-sm-12 col-md-6">
<label for="fName">First Name:</label>
<input type="text" class="form-control" id="firstname" placeholder="Eg - Michael">
</div>
<div class="col-sm-12 col-md-6">
<label for="lName">Last Name:</label>
<input type="text" class="form-control" id="lastname" placeholder="Eg - Clarke">
</div>
</div>
<div class='row'>
<div class="col-sm-12 col-md-6">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Eg-M.c@gmail.com">
</div>
<div class="col-sm-12 col-md-6">
<label for="confirm_email">Confirm Email:</label>
<input type="email" class="form-control" id="confirm_email" placeholder="type again">
</div>
</div>
<div class='row'>
<div class="col-sm-12 col-md-6">
<label for="email">Password:</label>
<input type="Password" class="form-control" id="password" placeholder="">
</div>
<div class="col-sm-12 col-md-6">
<label for="confirm_email">Confirm Password:</label>
<input type="Password" class="form-control" id="confirm_password" placeholder="">
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-6">
<div class="ml-sm-3 ml-md-3"></div>
<label for="Gender">Gender:</label>
<div class="row">
<div class="ml-sm-3 ml-md-3"></div>
<div class="form-check-inline">
<label class="form-check-label" for="Male">
<input type="radio" class="form-check-input" id="Gender" name="optradio" value="Male" checked>Male
</label>
</div>
<div class="ml-sm-4 ml-md-3"></div>
<div class="form-check-inline">
<label class="form-check-label" for="Female">
<input type="radio" class="form-check-input" id="Gender" name="optradio" value="Female">Female
</label>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6">
<label for="D.O.R">Date of Registration:</label><br>
<input type="date" class="form-control" id="date" placeholder="23/07/2018">
<p id="date"></p>
<script>
function myFunction() {
var x = document.getElementById("Date").value;
document.getElementById("Date").innerHTML = x;
}
</script>
</div>
</div>
<div class='row'>
<div class="col-sm-12 col-md-6">
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" id="checkbox" value="check">
I Accept all Terms and Conditions
</label>
</div>
<div class="row text-center">
<div class="col-sm-12 col-md-12">
<button id="but" onclick="return btnvalidate();">Submit</button>
</div>
</div>
</div>
</div>
<div class="col-sm-2 col-md-2"></div>
</div>
</div>
<script>
function btnvalidate() {
var fname = document.getElementById("firstname").value
if (fname.length == 0) {
alert('First Name cannot be Empty');
}
var lname = document.getElementById("lastname").value
if (lname.length == 0) {
alert('Last Name cannot be Empty');
}
var email = document.getElementById("email").value
if (email.length == 0) {
alert('email cannot be empty!')
}
var confirm_email = document.getElementById("confirm_email").value
if (confirm_email.length == 0) {
alert('You NEED to confirm the email!')
}
if (email != confirm_email) {
alert('Email Not Matching! Try again');
}
var password = document.getElementById("password").value
if (password.length == 0) {
alert('password cannot be empty!')
}
var confirm_password = document.getElementById("confirm_password").value
if (password != confirm_password) {
alert('Password Not Matching! Try again');
}
var date = document.getElementById("date").value
if (date.length == 0) {
alert('Date of Registeration cannot be empty!');
}
alert($("input[name='optradio']:checked").val());
if (!document.getElementById('checkbox').checked) {
alert('Checkbox not checked');
return false;
}
}
</script>
</body>
</html>
