Forms, How do I get my code to only display info has been submitted if all input boxes have values

Question

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



    
    
    
      
    BodyBuilding


    
    
        Index additional links to other pages: 

        Click here to go home:
        
            
        
    

    
    Body Building


    
    
    What is it?
    
    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.
    



    Why?
    
    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.
 

    
    
     
    
    
    
    Benefits
    
    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.
   
       Improves Posture
       Better Sleep
       Gaining Bone Density
       Boosts metabilsom
       Improves Strength and Endurance
       Releases endorphins (the bodies "feel good" chemical)
   


Example of a Workout Schedule
    
    
        
            
                Monday
            
            
                Tuesday
            
            
                Wednesday
            
            
                Thursday
            
            
                Friday
            
            
                Saturday
            
            
                Sunday
            

        
        
            Glute focused
            Back and Bicep focused
            Quad Focused
            Chest and Triceps focused
            Abdominal focus and strectching
            Rest day with a low intensity walk
            Rest day with recovery yoga
        
    

    

     
        Sign up for your own Workout Routine
            

        Email 

       

 First Name: 

       

Last Name: 
       

       

       

       


            
    
    
    
    
    
        
            
            
            
            
        
    

    
        Stephanie Brandon ©

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;
}

user_8733022 · Answer

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";
}

user_17581287 · Answer

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";
}
}
}

Forms, How do I get my code to only display info has been submitted if all input boxes have values

2 Answers