Unable to redirect to another html page after validation using javascript

Question

I have created a html page with a 2 different pages one for login and the other page to show after the successful login.

I have added a proper validation to the login.html page as below:

When I wanted to redirect and open 2nd html page after validating the input fields, I'm unable to open instead the input fields get cleared and the data is shown in the URL.

How can I redirect to the landing.html page which is in the same folder after validating the input fields in the login.html page

function validate(event) {
  event.preventDefault();
  var username = document.getElementById("username").value;
  var password = document.getElementById("password").value;
  if (username == "username" && password == "user123") {
    window.location.href = "landing.html";
  } else {
    alert("Invalid credentials");
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div class="container">
  <div class="box">
    <h1>Login</h1>
    <form class="form">
      <label>Username</label>
      <div>
        <i class="fa fa-user"></i>
        <input type="text" name="username" id="username" placeholder="Enter Username">
      </div>
      <label>Password</label>
      <div>
        <i class="fa fa-lock"></i>
        <input type="password" name="password" id="password" placeholder="Enter Password">
      </div>
      <a href="#" class="forgot">Forgot Password?</a>
      <input type="submit" value="Login" onclick="validate()">
    </form>
  </div>
</div>

Answer 1

You cannot use event.preventDefault unless you assign the event listener to the button or the form event directly

If you have a form, use the submit event!

Why not just change the form action?

Also strongly recommended not to have user id and password in the HTML file

window.addEventListener("DOMContentLoaded", () => {
  document.querySelector(".form").addEventListener("submit", function(e) {
    const username = this.username.value;
    const password = this.password.value;
    if (username === "username" && password === "user123") {
      this.action = "landing.html";
    } else {
      e.preventDefault(); // this goes here now
      alert("Invalid credentials");
    }
  })
})

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div class="container">
  <div class="box">
    <h1>Login</h1>
    <form class="form">
      <label>Username</label>
      <div>
        <i class="fa fa-user"></i>
        <input type="text" name="username" id="username" placeholder="Enter Username">
      </div>
      <label>Password</label>
      <div>
        <i class="fa fa-lock"></i>
        <input type="password" name="password" id="password" placeholder="Enter Password">
      </div>
      <a href="#" class="forgot">Forgot Password?</a>
      <input type="submit" value="Login">
    </form>
  </div>
</div>

Answer 2

You've misidentified the problem.

There is no "after validation".

You have onclick="validate()" which calls function validate(event) { passing undefined to the event argument. Then you have event.preventDefault(); which errors because undefined isn't an Event object. The error aborts the function.

---

Bind your event handlers with addEventListener. It avoids the drawbacks on onclick attributes and will pass an event object to the function.

Note, it is also generally better to listen for a submit event on the form than a click event on the submit button.

document.querySelector('form').addEventListener('submit', validate);

---

NB: Your approach is completely insecure. You can't give the client the data (the URL) you don't want the user to have until after AuthN is done. They can just look at the source code to see it. AuthN needs to take place on the server.