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 class="stephsBody">
<div id="topDisp">
<nav>
Index additional links to other pages: <br>
Click here to go home:
<a href="blank" target="_blank">
<img class="stephsImg" id="house" width="100" src="img/house.png" alt="home icon">
</a>
</nav>
</div>
<header class="sBstitle" >
<h1>Body Building</h1>
</header>
<main class="mainContent">
<hr>
<hr>
<h2>What is it?</h2>
<div class="readableDecor">
<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 class="stephsImg" width="300px" src="img/womenDoingCrunches.jpeg" alt="Women doing crunches.">
<h2>Why?</h2>
<div class="readableDecor">
<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 class="stephsImg" width="300px" src="img/womenOnLat.jpeg" alt="Women on latpulldown machine.">
<hr>
<div class="womenWorkingout">
</div>
<hr>
<h2>Benefits</h2>
<div id="benefits" class="readableDecor">
<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 class="stephsImg" id="benefitsImg" width="300px" src="img/womenWithBall.jpeg" alt="Women with a medicine ball.">
<h2>Example of a Workout Schedule</h2>
<div class="readableDecor">
<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 class="readableDecor id="f1" method="get">
<legend>Sign up for your own <em>Workout Routine</em></legend>
<div class="stephsTable">
Email <input class="inputBox" type="email" placeholder="[email protected]" id="t1"><span class="error" id="t1result"></span>
<br><br> First Name: <input class="inputBox" type="text" placeholder="Sophie" id="t2"><span class="error" id="t2result"></span>
<br><br>Last Name: <input class="inputBox" type="text" placeholder="Smith" id="t3"><span class="error" 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 class="xDecor">
<aside class="sideSection">
<div class="workingOutPhotos">
<img class="stephsImg" width="300px" src="img/womenSquatRack.jpeg" alt="Women squatting in squatrack.">
<img class="stephsImg" width="300px" src="img/manLifting.jpeg" alt="man lifting a bar, working out.">
<img class="stephsImg" width="300px" src="img/womenWorkingout.jpeg" alt="Women working out with ropes.">
</div>
</aside>
</div>
<footer class="cpRight">
<h2 class="cpRight">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;
}