Why does only a part of the code execute on submission of a form?

Question

I've made a form which, on submitting, triggers the function "validateForm()" from an external .js file. Here's the html:

        <div class="loginContainer">
            <div id="login "class="login">
            <img src="picture.tiff" class="loginImage">
            <div class="loginHeading">
                Login
            </div>
            <form id="form" onsubmit="validateForm()">
                <input type="text" class="loginTextbox" name="name" placeholder="Username"></input>
                <input type="password" class="loginTextbox" name="password"  placeholder="Password"></input>
                <div id="loginButtonContainer">
                    <input type="reset" class="loginButton" value="Reset">
                    <input type="submit" class="loginButton recommended" value="Login">
                </div>
            </form>
            </div>
        <script src="validator.js">
        </script>

On clicking submit, it triggers the function "validateForm()" function, which checks to see if the username is "username" and password is "password".(It's only an experiment I'm doing, so not much security needed.) And if they're not, it adds "disabled" and "invalid" classes to the form, and then removes them. (it functions like the macOS password screen on boot up.)

Only for some reason, it only executes part of the code:

function validateForm() {
  var form = document.getElementById("login");
  var name = document.forms["form"]["name"].value;
  var password = document.forms["form"]["password"].value;
    
  if (name == "username" && password == "password") {
    alert("Password is correct.");
  } else {
      alert("Password is incorrect.");


      // this part doesn't execute.
      form.classList.add("disabled");
      setTimeout(function(){
          form.classList.add("invalid");
      }, 2000);
      setTimeout(function(){
          form.classList.remove("invalid");
          form.classList.remove("disabled");
      }, 600);
  }
}

The part of code from form.classList.add("disabled"); doesn't execute. Can someone help me out with this?

edit: I tried <div id="login" class="login"> instead of <div id="login "class="login">, it doesn't work.

Edit 2: Here is the CSS:

body {
  background-image: url("background.jpg");
  font-family: system-ui;
  background-size: cover;
  background-position: center;
}



.loginContainer {
         position: fixed;
         top: 0;
         right: 0;
         bottom: 0;
         left: 0;
         background-color: rgba(10, 10, 10, 0.5);
         z-index: 1;
}

.login {
    height: 360px;
    width: 300px;
    background-color: #fbfbfb;
    border: 2px;
    border-radius: 16px;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 0;
    -webkit-transform: translate(-50%, -50%);
}

.loginimage {
    width: 100px;
    height: 100px;
    padding-top: 25px;
}

.loginHeading {
    font-size: 30px;
    font-weight: bold;
    height: 50px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.loginTextbox {
    height: 50px;
    width: 270px;
    margin: 4px;
    background-color: #fff;
    border: 2px;
    border-radius: 16px;
    font-size: 20px
    padding-right: 1rem;
    padding-left: 1rem;
}

.invalid {
    animation: shake .5s linear;
}

.loginTextbox:focus, textarea:focus {
  box-shadow: 0 0 5px #0084FF;
  border: 1px solid #006AFF;
}

.disabled {
    background-image: -webkit-linear-gradient(#cccccc, #bbbbbb);
    color: gray;
}

.loginbuttonContainer{
    height: 83px;
    width: 300px;
}

.loginbutton {
    height: 50px;
    width: 130px;
    margin: 4px;
    background-color: #f5f5f5;
    border: 2px;
    border-radius: 16px;
    font-size: 20px
}
.loginbutton:hover {
    background-color: #f0f0f0;
}
.loginbutton:active {
    background-image: -webkit-linear-gradient(#0084FF, #006AFF);
    color: white;
}

.destructive {
    color: red;
}

.recommended {
    background-image: -webkit-linear-gradient(#0095FF, #007BFF);
    color: white;
}

@keyframes shake {
    8%, 41% {
           -webkit-transform: translateX(-10px);
           -webkit-transform: translate(-50%, -50%);
       }
       25%, 58% {
           -webkit-transform: translateX(10px);
           -webkit-transform: translate(-50%, -50%);
       }
       75% {
           -webkit-transform: translateX(-5px);
           -webkit-transform: translate(-50%, -50%);
       }
       92% {
           -webkit-transform: translateX(5px);
           -webkit-transform: translate(-50%, -50%);
       }
       0%, 100% {
           -webkit-transform: translateX(0);
           -webkit-transform: translate(-50%, -50%);
       }
}

@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
    .login {
        -webkit-backdrop-filter: blur(5px);
        backdrop-filter: blur(5px);
        background-color: rgba(255, 255, 255, 0.5);
    }
}

Answer 1

I believe this here is where your problem lies

<div id="login "class="login">

There is additional " " after id="login"

And you're calling it with

var form = document.getElementById("login");

Just change

<div id="login "class="login">

to

<div id="login"class="login">

Edit V2

Change the following

setTimeout(function(){
          form.classList.remove("invalid");
          form.classList.remove("disabled");
      }, 9000); //Changes the delay of removing the effects


@keyframes shake {
    8%, 41% {
           transform: translateX(-10px);
           transform: translate(-50%, -50%);
       }
       25%, 58% {
           transform: translateX(10px);
           transform: translate(-50%, -50%);
       }
       75% {
           transform: translateX(-5px);
           transform: translate(-50%, -50%);
       }
       92% {
           transform: translateX(5px);
           transform: translate(-50%, -50%);
       }
       0%, 100% {
           transform: translateX(0);
           transform: translate(-50%, -50%);
       }
}

Change from 0.5s to 2 or 3 or so, because is too instant

.invalid {
    animation: shake 5s linear;
}

Changed the color code here too

.disabled {
    background-image: linear-gradient(red, blue);
    color: gray;
}