if/else not working in Javascript Login Page

Question

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

`

Answer 1

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.