TechQA.

if/else not working in Javascript Login Page

3.6k views Asked by At

I have created a Login Page with HTML, CSS & JS. If the value in <input> is correct, the js code takes me to the location I want with the code window.location.replace("href") and if the value is incorrect, it displays an alert. But I want a code so that if the input is empty it would show another alert not the previous one. I have also used required field in html <input> tag: <input type="password" id="password" class="input" required>, but by using required the whole code doesn't works. The code is:

Javascript

function auth(event) {
      event.preventDefault();

      var username = document.getElementById("username").value;
      var password = document.getElementById("password").value;

      if (username === "[email protected]" && password === "user") {
           window.location.replace("http://www.rex14.ml/");
      } else {
          alert("Please enter valid information");
          return;
      }
}

I have tried this but it is not working: `

    function auth(event) {
          event.preventDefault();

          var username = document.getElementById("username").value;
          var password = document.getElementById("password").value;

          if (username === "[email protected]" && password === "user") {
               window.location.replace("http://www.rex14.ml/");
          } else {
              alert("Please enter valid information");
              return;
          }
 if (username === "" && password === "") {
               alert("Please enter information");
          } else {
              
              return;
          }
    }

`

javascript html if-statement authentication login-script
Original Q&A
5

There are 5 answers

0
MrFthiz On BEST ANSWER

Just add a validation to check if the fields are empty:

if (username.length === 0 || password.length === 0) {
  alert("Username and password must be filled!");
  return;
}

So your method would look like:

function auth(event) {
  event.preventDefault();

  var username = document.getElementById("username").value;
  var password = document.getElementById("password").value;

  // check if the username of password are empty
  if (username.length === 0 || password.length === 0) {
    alert("Username and password must be filled!");
    return false;
  }

  if (username === "[email protected]" && password === "user") {
    window.location.replace("http://www.rex14.ml/");
  } else {
    alert("Please enter valid information");
    return;
  }
}

Regarding your second snippet, you cant do 2 else's like if / else / else, the right way to do it with a single if block would be to use a simple, if / else if / else like this:

function auth(event) {
  event.preventDefault();

  var username = document.getElementById("username").value;
  var password = document.getElementById("password").value;

  if (username.length === 0 || password.length === 0) {
    alert("Username and password must be filled!");
    return;
  } else if (username === "[email protected]" && password === "user") {
    window.location.replace("http://www.rex14.ml/");
  } else {
    alert("Please enter valid information");
    return;
  }
}

NOTE: Javascript code can be seen just by inspecting the code of the page, so storing username & password in the js file like you are doing is super insecure, anyone would be able to inspect the code and see what username and password should be used.

0
Aqib Naeem On

The problem is with your if/else structure.By using required in form, your form is not submitted and your function is not called, your function will only be called when the form is submitted, required doesn't allow form to submit until the field is filled out. html file is:

<body>
  <form id="form">
      <input type="text" placeholder="username" id="username">
      <input type="text" placeholder="password" id="password">
      <button type="submit">Submit</button>
  </form>
  

  <script src="index.js"></script>
</body>

and javascript file will be:

document.getElementById("form").addEventListener("submit", auth);

function auth(event) {
     event.preventDefault();

     var username = document.getElementById("username").value;
     var password = document.getElementById("password").value;
     console.log(username);

     if (username === "[email protected]" && password === "user") {
          window.location.replace("http://www.rex14.ml/");
     }  if (username === "" && password === "") {
          alert("Please enter information");
     } else{
         alert("Please enter valid information");
         return;
     }
}

for live demo, visit my codepen

0
Iman_Ghavasieh On

Fist of all, you should use "else if". Otherwise your third condition would never be considered. A simple solution is like this:

function auth(event) {
     event.preventDefault();
     if (username === "[email protected]" && password === "user") {
          window.location.replace("http://www.rex14.ml/");
     } else if (username === "" && password === "") {
          alert("Please enter information");
          return;
     } else {
         alert("Please enter valid information");
         return;
     }
}

You can also get rid of any "else" statement this way:

function auth(event) {
     event.preventDefault();
     if (username === "[email protected]" && password === "user") {
          window.location.replace("http://www.rex14.ml/");
          return;
     }
     if (username === "" && password === "") {
          alert("Please enter information");
          return;
     }
     alert("Please enter valid information");
     return;
}

Second, if you have a "required" input inside a form, and you leave it empty, it won't be submitted. If your input is not inside a form, add an event handler. If it is inside a form, remove the "required" field because you are already handling the empty input problem inside your auth function.

0
NIkhil Rohilla On

The reason I can see is the order of if-else and if statements. The if statement after if-else is unreachable that's why it does not show the new alert you added.

Try using the following code :

function auth(event) {
          event.preventDefault();

          var username = document.getElementById("username").value;
          var password = document.getElementById("password").value;

          if (username === "[email protected]" && password === "user") 
         {
               window.location.replace("http://www.rex14.ml/");
          } else if (username === "" && password === "") {
               alert("Please enter information");
          } else {
              alert("Please enter valid information");
              return;
          }
    }
0
Force Bolt On 

<!DOCTYPE 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" />
    <title>Document</title>
  </head>
  <body>
    <form id="form" onsubmit="return auth(this)">
      <input type="text" placeholder="username" id="username" />
      <input type="text" placeholder="password" id="password" />
      <button type="submit">Submit</button>
    </form>
  </body>
  <script>
    function auth(event) {
      var username = event.username.value;
      var password = event.password.value;

      if (username === "[email protected]" && password === "user") {
        window.location.replace("http://www.rex14.ml/");
      } else {
        alert("Please enter valid information");
        return false;
      }
      return false;
    }
  </script>
</html>

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in IF-STATEMENT

Related Questions in AUTHENTICATION

Related Questions in LOGIN-SCRIPT

Popular Questions

Popular Tags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json

Trending Questions