Hello all I am working on an assignment for my first semester in school and I am trying to get the message "Your information has been submitted to only be displayed if all 3 form inputs have inputs in them. Right now it mostly works but when I click validate after removing last name the message is still there. How do I get the message to disappear if one of the inputs is removed? Also not needed but would love to have a display of @ required for when the input is typed into email. Thanks!
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="stephs.css">
<title>BodyBuilding</title>
</head>
<body >
<div id="topDisp">
<nav>
Index additional links to other pages: <br>
Click here to go home:
<a href="blank" target="_blank">
<img id="house" width="100" src="img/house.png" alt="home icon">
</a>
</nav>
</div>
<header >
<h1>Body Building</h1>
</header>
<main >
<hr>
<hr>
<h2>What is it?</h2>
<div >
<p>Body building is a division of fitness that involves lifting weights and developing your muscles. The goal of a lot of bodybuilders is to alter their bodies and develop muscle mass to form parts of their body to be more defined or larger.</p>
<br>
</div>
<img width="300px" src="img/womenDoingCrunches.jpeg" alt="Women doing crunches.">
<h2>Why?</h2>
<div >
<p>I got involved with bodybuilding during my journey to lose the initial weight I desired. Specifically, I used to be 210lbs. I did research to see what ways I could live a healthier lifestyle and change my body composition and came accross bodybuilding. I began to watch videos of different workout routines and began incoporating that into my schedule.</p>
</div>
<img width="300px" src="img/womenOnLat.jpeg" alt="Women on latpulldown machine.">
<hr>
<div >
</div>
<hr>
<h2>Benefits</h2>
<div id="benefits" >
<p>There are multiple benefits to bodybuilding, while the most obvious answer may seem to be the benefit of muscle definition there are many additional benefits as well.</p>
<ul>
<li>Improves Posture</li>
<li>Better Sleep</li>
<li>Gaining Bone Density</li>
<li>Boosts metabilsom</li>
<li>Improves Strength and Endurance</li>
<li>Releases endorphins (the bodies "feel good" chemical)</li>
</ul>
</div>
<img id="benefitsImg" width="300px" src="img/womenWithBall.jpeg" alt="Women with a medicine ball.">
<h2>Example of a Workout Schedule</h2>
<div >
<table border="3">
<tr>
<th>
Monday
</th>
<th>
Tuesday
</th>
<th>
Wednesday
</th>
<th>
Thursday
</th>
<th>
Friday
</th>
<th>
Saturday
</th>
<th>
Sunday
</th>
</tr>
<tr>
<td>Glute focused</td>
<td>Back and Bicep focused</td>
<td>Quad Focused</td>
<td>Chest and Triceps focused</td>
<td>Abdominal focus and strectching</td>
<td>Rest day with a low intensity walk</td>
<td>Rest day with recovery yoga</td>
</tr>
</table >
</div>
<br>
<form f1" method="get">
<legend>Sign up for your own <em>Workout Routine</em></legend>
<div >
Email <input type="email" placeholder="[email protected]" id="t1"><span id="t1result"></span>
<br><br> First Name: <input type="text" placeholder="Sophie" id="t2"><span id="t2result"></span>
<br><br>Last Name: <input type="text" placeholder="Smith" id="t3"><span id="t3result"></span>
<br>
<br>
<span id="infoValid"></span>
<br><br><input type="button" id="btn1" value ="Validate" onclick = "validate()">
</div>
</fieldset>
</form>
</main>
<div >
<aside >
<div >
<img width="300px" src="img/womenSquatRack.jpeg" alt="Women squatting in squatrack.">
<img width="300px" src="img/manLifting.jpeg" alt="man lifting a bar, working out.">
<img width="300px" src="img/womenWorkingout.jpeg" alt="Women working out with ropes.">
</div>
</aside>
</div>
<footer >
<h2 >Stephanie Brandon ©</h2>
</footer>
<script type="text/javascript" src="validationForStephs.js"></script>
</body>
</html>
JavaScript
//Function to validate form inputs
function validate(){
var email = document.getElementById("t1").value;
var fname = document.getElementById("t2").value;
var lname = document.getElementById("t3").value;
var isValid = true;
if(email ==""){
document.getElementById("t1result").innerHTML=" Email is required";
isValid=false;
}
else{
document.getElementById("t1result").innerHTML="";
}
if(fname ==""){
document.getElementById("t2result").innerHTML=" First Name is required";
isValid=false;
}
else{
document.getElementById("t2result").innerHTML="";
}
if(lname ==""){
document.getElementById("t3result").innerHTML=" Last name is required";
isValid=false;
}
else{
document.getElementById("t3result").innerHTML="";
document.getElementById("infoValid").innerHTML="Your information has been submitted";
}
}
CSS
#topDisp:hover{
background-color: #A8ECE7;
color: white ;
text-shadow: 2px 1px black;
transition: .5s;
}
#house:hover{
background-color: #FDFF8F;
border-radius: 30px;
}
#topDisp{
color: white;
padding: 10px;
margin: 10px;
background-color: #F4BEEE;
border-radius: 25px;
border:2px solid black;
float: right;
}
.mainContent{
float: left;
padding: 10px;
margin: 30px;
background-color: #FDFF8F;
width: 800px;
}
.stephsBody{
background-color: #A8ECE7;
color: black;
text-shadow: 2px 2px #D47AE8;
font-family: 'Lato', sans-serif;
font-family: 'Montserrat', sans-serif;
font-family: 'Raleway', sans-serif;
font-family: 'Rubik', sans-serif;
}
.sBstitle{
margin: 20px;
padding: 10px;
background-color:#FDFF8F ;
border-radius: 20px;
}
.sideSection{
width: 300px;
padding: 10px;
margin: 30px;
float: right;
background-color: aliceblue;
}
.xDecor{
width: 250px;
float: right;
margin: 13px;
padding: 10px;
background-color: #FDFF8F;
}
#stephsFooter{
float:inherit;
bottom: 0px;
}
.stephsImg{
border-radius: 25px;
padding: 10px;
margin:5px;
background-color: #D47AE8;
}
.readableDecor{
background-color: white;
text-shadow: none;
border-radius: 15px;
}
#pathToFrench{
width: 580px;
}
#brain{
float: right;
}
#langBen{
width: 400px;
float: right;
}
.cpRight{
position: relative;
text-align: end;
width: 900px;
}
#benefits{
width: 450px;
float: left;
}
#benefitsImg{
float: right;
}
.stephsTable{
background-color: #F4BEEE;
color:black;
font-family: 'Roboto Mono', monospace;
}
.error{
background-color: #FDFF8F;
margin: 15px;
border-radius: 20px;
}
#infoValid{
background-color: #FDFF8F;
margin: 15px;
border-radius: 20px;
}
CodePudding user response：
In your code the displaying of the final message is dependent solely on the value of the field lname. (You can try to validate the form with last name only and you will see.)
Each of the conditions works separately (which is good for checking whether the one related field is empty or not). But for validating the whole form, it is then necessary to do one extra check of all the fields at once.
So you need to move this line away from the condition of lname...
document.getElementById("infoValid").innerHTML="Your information has been submitted";
... and create new condition checking all the fields together. It could be something like:
if(email == "" || fname =="" || lname =="") { // = if email is empty OR fname is empty OR lname is empty
document.getElementById("infoValid").innerHTML="";
}
else{
document.getElementById("infoValid").innerHTML="Your information has been submitted";
}
CodePudding user response：
You are using validation condition for individual elements in your form, that works properly. You can use a condition checking all the fields for that you can add
//Function to validate form inputs
function validate(){
var email = document.getElementById("t1").value;
var fname = document.getElementById("t2").value;
var lname = document.getElementById("t3").value;
var isValid = true;
if(email ==""){
document.getElementById("t1result").innerHTML=" Email is required";
isValid=false;
}
else{
document.getElementById("t1result").innerHTML="";
}
if(fname ==""){
document.getElementById("t2result").innerHTML=" First Name is required";
isValid=false;
}
else{
document.getElementById("t2result").innerHTML="";
}
if(lname ==""){
document.getElementById("t3result").innerHTML=" Last name is required";
isValid=false;
}
else{
document.getElementById("t3result").innerHTML="";
if(email == "" || fname =="" || lname =="") {
document.getElementById("infoValid").innerHTML="";
}
else{
document.getElementById("infoValid").innerHTML="Your information has been submitted";
}
}
}