[FIXED] How To Validate Form Through JavaScript Before Entering To The Next Page?

Issue

This is a register form I'm currently working on it. The problem is that the JavaScript only validates the first field in the form which is the "username" field only, but not the rest of it. If i change the code by moving the password field to above, then the code validates for the passwords only. and same goes for the email address field. May I know, how to solve this issue?. Your help is much appreciated. I'm having this error only in Eclipse IDE application. BUT, WHEN THIS CODE IS DONE IN FIDDLE, IT WORKS FINE. THE CODE IN THE FIDDLE IS IN THIS LINK: https://jsfiddle.net/dbvnkcfm/5/.

Please help solve this issue, because I'm new to JavaScript.

Below is the code in my Eclipse IDE.

@charset "ISO-8859-1";

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: #ECB365;
}

body,
input {
  font-family: "Poppins", sans-serif;
}


.container {
  position: relative;
  width: 100%;
  background-color: #041C32;
  min-height: 100vh;
  overflow: hidden;
}

.forms-container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.login-signup {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  left: 75%;
  width: 50%;
  transition: 1s 0.7s ease-in-out;
  display: grid;
  grid-template-columns: 1fr;
  z-index: 5;
}

form {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 0rem 5rem;
  transition: all 0.2s 0.7s;
  overflow: hidden;
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

form.sign-up-form {
  opacity: 0;
  z-index: 1;
}

form.log-in-form {
  z-index: 2;
}

.title {
  font-size: 2.2rem;
  color: #ECB365;
  margin-bottom: 10px;
}

.input-field {
  max-width: 380px;
  width: 100%;
  background-color: #ECB365;
  margin: 10px 0;
  height: 55px;
  border-radius: 55px;
  display: grid;
  grid-template-columns: 15% 85%;
  padding: 0 0.4rem;
  position: relative;
}

.input-field i {
  text-align: center;
  line-height: 55px;
  color: #444444;
  transition: 0.5s;
  font-size: 1.1rem;
}

.input-field input {
  background: none;
  outline: none;
  border: none;
  line-height: 1;
  font-weight: 600;
  font-size: 1.1rem;
  color: #041C32;
}

.input-field input::placeholder {
  color: #444444;
  font-weight: 500;
}

.social-text {
  padding: 0.7rem 0;
  font-size: 1rem;
}

.social-media {
  display: flex;
  justify-content: center;
}

.social-icon {
  height: 46px;
  width: 46px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 0.45rem;
  color: #ECDBBA;
  border-radius: 50%;
  border: 1px solid #fff;
  text-decoration: none;
  font-size: 1.1rem;
  transition: 0.3s;
}


.social-icon:hover {
  color: #ECB365;
  border-color: #ECB365;
}

.btn {
  width: 150px;
  background-color: #064663;
  border: none;
  outline: none;
  height: 49px;
  border-radius: 49px;
  color: #fff;
  text-transform: uppercase;
  font-weight: 600;
  margin: 10px 0;
  cursor: pointer;
  transition: 0.5s;
}

.btn:hover {
  background-color: #4d84e2;
}
.panels-container {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.container:before {
  content: "";
  position: absolute;
  height: 2000px;
  width: 2000px;
  top: -10%;
  right: 48%;
  transform: translateY(-50%);
  background-image: linear-gradient(-45deg, #064663 0%, #064663 100%);
  transition: 1.8s ease-in-out;
  border-radius: 50%;
  z-index: 6;
}

.image {
  width: 100%;
  transition: transform 1.1s ease-in-out;
  transition-delay: 0.4s;
}

.panel {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-around;
  text-align: center;
  z-index: 6;
}

.left-panel {
  pointer-events: all;
  padding: 3rem 17% 2rem 12%;
}

.right-panel {
  pointer-events: none;
  padding: 3rem 12% 2rem 17%;
}

.panel .content {
  color: #fff;
  transition: transform 0.9s ease-in-out;
  transition-delay: 0.6s;
}

.panel h3 {
  font-weight: 600;
  line-height: 1;
  font-size: 1.5rem;
}

.panel p {
  font-size: 0.95rem;
  padding: 0.7rem 0;
}

.btn.transparent {
  margin: 0;
  background: #041C32;
  /*border: 2px solid #fff;*/
  width: 130px;
  height: 41px;
  font-weight: 600;
  font-size: 0.8rem;
}

.btn.transparent:hover {
  background-color: #4d84e2;
}

.right-panel .image,
.right-panel .content {
  transform: translateX(800px);
}

/* ANIMATION */

.container.sign-up-mode:before {
  transform: translate(100%, -50%);
  right: 52%;
}

.container.sign-up-mode .left-panel .image,
.container.sign-up-mode .left-panel .content {
  transform: translateX(-800px);
}

.container.sign-up-mode .login-signup {
  left: 25%;
}

.container.sign-up-mode form.sign-up-form {
  opacity: 1;
  z-index: 2;
}

.container.sign-up-mode form.log-in-form {
  opacity: 0;
  z-index: 1;
}

.container.sign-up-mode .right-panel .image,
.container.sign-up-mode .right-panel .content {
  transform: translateX(0%);
}

.container.sign-up-mode .left-panel {
  pointer-events: none;
}

.container.sign-up-mode .right-panel {
  pointer-events: all;
}

@media (max-width: 870px) {
  .container {
    min-height: 800px;
    height: 100vh;
  }
  .login-signup {
    width: 100%;
    top: 95%;
    transform: translate(-50%, -100%);
    transition: 1s 0.8s ease-in-out;
  }

  .login-signup,
  .container.sign-up-mode .login-signup {
    left: 50%;
  }

  .panels-container {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 2fr 1fr;
  }

  .panel {
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    padding: 2.5rem 8%;
    grid-column: 1 / 2;
  }

  .right-panel {
    grid-row: 3 / 4;
  }

  .left-panel {
    grid-row: 1 / 2;
  }

  .image {
    width: 200px;
    transition: transform 0.9s ease-in-out;
    transition-delay: 0.6s;
  }

  .panel .content {
    padding-right: 15%;
    transition: transform 0.9s ease-in-out;
    transition-delay: 0.8s;
  }

  .panel h3 {
    font-size: 1.2rem;
  }

  .panel p {
    font-size: 0.7rem;
    padding: 0.5rem 0;
  }

  .btn.transparent {
    width: 110px;
    height: 35px;
    font-size: 0.7rem;
  }

  .container:before {
    width: 1500px;
    height: 1500px;
    transform: translateX(-50%);
    left: 30%;
    bottom: 68%;
    right: initial;
    top: initial;
    transition: 2s ease-in-out;
  }

  .container.sign-up-mode:before {
    transform: translate(-50%, 100%);
    bottom: 32%;
    right: initial;
  }

  .container.sign-up-mode .left-panel .image,
  .container.sign-up-mode .left-panel .content {
    transform: translateY(-300px);
  }

  .container.sign-up-mode .right-panel .image,
  .container.sign-up-mode .right-panel .content {
    transform: translateY(0px);
  }

  .right-panel .image,
  .right-panel .content {
    transform: translateY(300px);
  }

  .container.sign-up-mode .login-signup {
    top: 5%;
    transform: translate(-50%, 0);
  }
}

@media (max-width: 570px) {
  form {
    padding: 0 1.5rem;
  }

  .image {
    display: none;
  }
  .panel .content {
    padding: 0.5rem 1rem;
  }
  .container {
    padding: 1.5rem;
  }

  .container:before {
    bottom: 72%;
    left: 50%;
  }

  .container.sign-up-mode:before {
    bottom: 28%;
    left: 50%;
  }
}

<!DOCTYPE html>
<html lang="en">
    <head>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         
         <link rel="stylesheet" href="Style.css" />
         <title>Sign in & Sign up Form</title>
    </head>
    
    <script src="https://kit.fontawesome.com/64d58efce2.js" crossorigin="anonymous" ></script>
  
    <body>
        <div class="container">
            <div class="forms-container">
            
<!---------------------------- this is for login form ------------------------------------->
                
                <div class="login-signup">
                
                    <form action="Logsuccess" class="log-in-form" method="get">
                        <h2 class="title">Log-in</h2>
                        <div class="input-field">
                            <i class="fas fa-user"></i>
                            <input type="text" name="username" placeholder="Username" id = "user" class = "text-danger"/>
                        </div>
                        
                        <br>
                        
                        <div class="input-field">
                            <i class="fas fa-lock"></i>
                            <input type="password" name="password" placeholder="Password" id = "pass" class = "text-danger"/>
                        </div>
                        
                        <br>
                        
                        
                        <input type="submit" value="Login" class="btn solid" />
                        <p class="social-text">Or Sign in with social platforms</p>
                        
                        <div class="social-media">
                            <a href="#" class="social-icon"> <i class="fab fa-facebook-f"> </i> </a>
                            <a href="#" class="social-icon"> <i class="fab fa-twitter">    </i> </a>
                            <a href="#" class="social-icon"> <i class="fab fa-google">     </i> </a>
                            <a href="#" class="social-icon"> <i class="fab fa-linkedin-in"></i> </a>
                        </div>
                    </form>
                    
<!---------------------------- this is for signup form ------------------------------------->
                    
                    <!-- <form action="#" class="sign-up-form" method="post" onsubmit="return validation()">  -->
                    <!-- <form action="RegSuccess" class="sign-up-form" method="post">-->
                    <form action="RegConfirm.php" class="sign-up-form" method="post" onSubmit="return Register()">    
                        <h2 class="title">Sign up</h2>
                        <div class="input-field">
                          <i class="fas fa-user"></i>
                          <input type="text" name="Username" placeholder="Username" id = "user" class = "text-danger"/>
                        </div>
                        
                        <br>
                    
                        <div class="input-field">
                          <i class="fas fa-envelope"></i>
                          <input type="email" name="email" placeholder="Email" id = "emailAddress" class = "text-danger"/>
                        </div>
                    
                        <br>
                    
                        <div class="input-field">
                          <i class="fas fa-lock"></i>
                          <input type="password" name="Password"  placeholder="Password" id = "pass" class = "text-danger"/>
                        </div>
                    
                        <br>
                    
                        <input type="submit" class="btn" value="Sign up" />
                    </form>
                </div>
            </div>

<!---------------------------- this is in login page for asking to signup------------------------------------->

            <div class="panels-container">
                <div class="panel left-panel">
                    <div class="content">
                        <h3>Don't Have An Account ?</h3>
                        <p>
                            Your are always welcome to join us!!!
                        </p>
                        
                        <button class="btn transparent" id="sign-up-btn"> Sign up </button>
                    </div>
                    <img src="img/log.svg" class="image" alt="" />
                </div>

<!---------------------------- this is in signup page for asking to login------------------------------------->

                <div class="panel right-panel">
                    <div class="content">
                        <h3>Are You One of Us ?</h3>
                        <p>
                            Let's Log In Then !!!
                        </p>
                        
                        <button class="btn transparent" id="sign-in-btn"> Log in </button>
                    </div>
                    <img src="img/register.svg" class="image" alt="" />
                </div>
            </div>
        </div>




        <script>
            //---------------------------- this is javascript for the buttons -------------------------------------//
            const sign_in_btn = document.querySelector("#sign-in-btn");
            const sign_up_btn = document.querySelector("#sign-up-btn");
            const container = document.querySelector(".container");
            
            sign_up_btn.addEventListener("click", () => {
              container.classList.add("sign-up-mode");
            });
            
            sign_in_btn.addEventListener("click", () => {
              container.classList.remove("sign-up-mode");
            });
        
            //---------------------------- start of javascript for validation -------------------------------------//
        function Register() 
        {
            return validation();      
        }
        
        function validation() 
        {
        
              var user = document.getElementById('user').value;
              var emailAddress = document.getElementById('emailAddress').value;
              var pass = document.getElementById('pass').value;
        
              console.log(user)
              if (user == null || user == "")
                { 
                    alert ("Username cannot be empty");                 
                    return false;  
                }
                else if(user.length < 3 || user.length > 30)
                {  
                    alert ("Username must be at least 3 characters long.");  
                    return false;  
                }
                else
                {
                    return true;
                }
        
        
              console.log(emailAddress)
              if (emailAddress == null || emailAddress == "")
                    { 
                        alert ("Email cannot be empty");                    
                        return false;  
                    }
                    else if(emailAddress.indexOf('@') <= 0)
                    {  
                        alert (" @ symbol is on invalid position");  
                      return false;  
                    }
                    else
                    {
                        document.getElementById('emailAddress').innerHTMl = "";
                    }
              
        
              console.log(pass)
              if (pass == null || pass == "")
                    { 
                        alert ("Password cannot be empty");                 
                        return false;  
                    }
                    else if(pass.length <= 4 || pass.length >= 20)
                    {  
                        alert ("Password must be at least 4 characters long.");  
                      return false;  
                    }
                    else
                    {
                        document.getElementById('pass').innerHTMl = "";
                    }
        }
        //---------------------------- end of javascript for validation -------------------------------------//
            
        </script>
    
    </body>
</html>

Solution

You have duplicated IDs so I add 's' for each ID in signup form also when you use return It's something like you break the function. This should work for you

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="stylesheet" href="main.css" />
    <title>Sign in & Sign up Form</title>
</head>

<script src="https://kit.fontawesome.com/64d58efce2.js" crossorigin="anonymous"></script>

<body>
    <div class="container">
        <div class="forms-container">

            <!---------------------------- this is for login form ------------------------------------->

            <div class="login-signup">

                <form action="Logsuccess" class="log-in-form" method="post">
                    <h2 class="title">Log-in</h2>
                    <div class="input-field">
                        <i class="fas fa-user"></i>
                        <input type="text" name="username" placeholder="Username" id="luser" class="text-danger" />
                    </div>

                    <br>

                    <div class="input-field">
                        <i class="fas fa-lock"></i>
                        <input type="password" name="password" placeholder="Password" id="lpass" class="text-danger" />
                    </div>

                    <br>


                    <input type="button" value="Login" class="btn solid" onclick="Register('login')" />
                    <p class="social-text">Or Sign in with social platforms</p>

                    <div class="social-media">
                        <a href="#" class="social-icon"> <i class="fab fa-facebook-f"> </i> </a>
                        <a href="#" class="social-icon"> <i class="fab fa-twitter"> </i> </a>
                        <a href="#" class="social-icon"> <i class="fab fa-google"> </i> </a>
                        <a href="#" class="social-icon"> <i class="fab fa-linkedin-in"></i> </a>
                    </div>
                </form>

                <!---------------------------- this is for signup form ------------------------------------->

                <!-- <form action="#" class="sign-up-form" method="post" onsubmit="return validation()">  -->
                <!-- <form action="RegSuccess" class="sign-up-form" method="post">-->
                <form action="RegConfirm.php" class="sign-up-form" method="post" o>
                    <h2 class="title">Sign up</h2>
                    <div class="input-field">
                        <i class="fas fa-user"></i>
                        <input type="text" name="Username" placeholder="Username" id="suser" class="text-danger" />
                    </div>

                    <br>

                    <div class="input-field">
                        <i class="fas fa-envelope"></i>
                        <input type="email" name="email" placeholder="Email" id="semailAddress" class="text-danger" />
                    </div>

                    <br>

                    <div class="input-field">
                        <i class="fas fa-lock"></i>
                        <input type="password" name="Password" placeholder="Password" id="spass" class="text-danger" />
                    </div>

                    <br>

                    <input type="button" class="btn" value="Sign up" onclick="Register('signup')" />
                </form>
            </div>
        </div>

        <!---------------------------- this is in login page for asking to signup------------------------------------->

        <div class="panels-container">
            <div class="panel left-panel">
                <div class="content">
                    <h3>Don't Have An Account ?</h3>
                    <p>
                        Your are always welcome to join us!!!
                    </p>

                    <button class="btn transparent" id="sign-up-btn"> Sign up </button>
                </div>
                <img src="img/log.svg" class="image" alt="" />
            </div>

            <!---------------------------- this is in signup page for asking to login------------------------------------->

            <div class="panel right-panel">
                <div class="content">
                    <h3>Are You One of Us ?</h3>
                    <p>
                        Let's Log In Then !!!
                    </p>

                    <button class="btn transparent" id="sign-in-btn"> Log in </button>
                </div>
                <img src="img/register.svg" class="image" alt="" />
            </div>
        </div>
    </div>




    <script>
        //---------------------------- this is javascript for the buttons -------------------------------------//
        const sign_in_btn = document.querySelector("#sign-in-btn");
        const sign_up_btn = document.querySelector("#sign-up-btn");
        const container = document.querySelector(".container");

        sign_up_btn.addEventListener("click", () => {
            container.classList.add("sign-up-mode");
        });

        sign_in_btn.addEventListener("click", () => {
            container.classList.remove("sign-up-mode");
        });

        //---------------------------- start of javascript for validation -------------------------------------//
        function Register(formType) {
            return validation(formType);
        }

        function validation(formType) {

            if (formType == "login") {
                var user = document.getElementById("luser").value;
                var pass = document.getElementById("lpass").value;
            } else {
                var user = document.getElementById("suser").value;
                var pass = document.getElementById("spass").value;
                var emailAddress = document.getElementById("semailAddress").value;
            }
            var errors = [];
            // var user = document.getElementById('suser').value;
            // var emailAddress = document.getElementById('semailAddress').value;
            // var pass = document.getElementById('spass').value;

            console.log(user)
            if (user == null || user == "") {
                errors.push("Username is required");
                // return false;
            } else if (user.length < 3 || user.length > 30) {
                errors.push("Username must be at least 3 characters long.");
                // return false;
            }

            if (formType == "signup") {
                console.log(emailAddress)
                if (emailAddress == null || emailAddress == "") {
                    errors.push("Email cannot be empty");
                    //return false;
                } else if (emailAddress.indexOf('@') <= 0) {
                    errors.push(" @ symbol is on invalid position");
                } else {
                    document.getElementById('semailAddress').innerHTMl = "";
                }
            }

            console.log(pass)
            if (pass == null || pass == "") {
                errors.push("Password cannot be empty");
                // return false;
            } else if (pass.length <= 4 || pass.length >= 20) {
                errors.push("Password must be at least 4 characters long.");
                // return false;
            } else {
                document.getElementById('spass').innerHTMl = "";
            }

            if (errors.length > 0) {
                alert(errors.join("\n"));
                return false;
            } else {
                return true;
            }
        }
        //---------------------------- end of javascript for validation -------------------------------------//
    </script>

</body>

</html>

Answered By - Mohamed EL-Gendy
Answer Checked By - Marilyn (JavaFixing Volunteer)