这就是登录表单和根据字段是否为空来更改CSS的脚本：

const form = document.getElementById('forma');
const email = document.getElementById('email');
const lozinka = document.getElementById('lozinka');
const faliemail = document.getElementById('faliemail');
const falilozinka = document.getElementById('falilozinka');

form
  .addEventListener(
    'submit',
    (event) => {
      email.classList.toggle('error', !email.validity.valid);
      lozinka.classList.toggle('error', !lozinka.validity.valid);
      faliemail.classList.toggle('promeni', !email.validity.valid);
      falilozinka.classList.toggle('promeni', !lozinka.validity.valid);

      if (!email.validity.valid) {
        event.preventDefault();
      }

      if (!lozinka.validity.valid) {
        event.preventDefault();
      }
    }
  );

email
  .addEventListener(
    'input',
    () => {
      email.classList.toggle('uredu', email.validity.valid);
    }
  );

lozinka
  .addEventListener(
    'input',
    () => {
      lozinka.classList.toggle('uredu', lozinka.validity.valid);
    }
  );

#faliemail {
  display: none;
}

#falilozinka {
  display: none;
}

#lozinka.error {
  border: 2px solid #eb7178;
}

#email.error {
  border: 2px solid #eb7178;
}

#faliemail.promeni {
  display: flex;
  margin-top: 5px;
}

#faliemail.promeni h5 {
  color: #eb7178;
}

#falilozinka.promeni {
  display: flex;
  margin-top: 5px;
}

#falilozinka.promeni h5 {
  color: #eb7178;
}

#email.uredu {
  border: none;
}

#lozinka.uredu {
  border: none;
}

<form class="container" method="post" action="" id="forma" enctype="multipart/form-data" novalidate>
  <h3>Email*</h3>
  <input type="email" name="email" id="email" class="input" placeholder="Email" required>

  <div id="faliemail">
    <h5 class="crvena">Unesi email</h5>
  </div>

  <h3>Lozinka*</h3>
  <input type="password" name="lozinka" id="lozinka" class="input" placeholder="Šifra" required>

  <div id="falilozinka">
    <h5 class="crvena">Unesi lozinku</h5>
  </div>

  <div class="buttoncontainer">
    <button class="button" name="button" id="button" type="submit">Prijavi se</button>
  </div>
</form>

当我进入注册页面时，它并不完全一样。下面是表单和脚本：

const form = document.getElementById('formareg');
const email = document.getElementById('email');
const lozinka = document.getElementById('lozinka');
const ime = document.getElementById('ime');
const prezime = document.getElementById('prezime');

form
  .addEventListener(
    'submit',
    (event) => {
      ime.classList.toggle('error', !ime.validity.valid);
      prezime.classList.toggle('error', !prezime.validity.valid);
      email.classList.toggle('error', !email.validity.valid);
      lozinka.classList.toggle('error', !lozinka.validity.valid);
      faliemail.classList.toggle('promeni', !email.validity.valid);
      falilozinka.classList.toggle('promeni', !lozinka.validity.valid);
      faliime.classList.toggle('promeni', !ime.validity.valid);
      faliprezime.classList.toggle('promeni', !prezime.validity.valid);

      if (!ime.validity.valid) {
        event.preventDefault();
      }

      if (!prezime.validity.valid) {
        event.preventDefault();
      }

      if (!email.validity.valid) {
        event.preventDefault();
      }

      if (!lozinka.validity.valid) {
        event.preventDefault();
      }

    }
  );

ime
  .addEventListener(
    'input',
    () => {
      ime.classList.toggle('uredu', ime.validity.valid);
    }
  );

prezime
  .addEventListener(
    'input',
    () => {
      prezime.classList.toggle('uredu', prezime.validity.valid);
    }
  );

email
  .addEventListener(
    'input',
    () => {
      email.classList.toggle('uredu', email.validity.valid);
    }
  );

lozinka
  .addEventListener(
    'input',
    () => {
      lozinka.classList.toggle('uredu', lozinka.validity.valid);
    }
  );

#ime.uredu {
  border: none;
}

#ime.error {
  border: 2px solid #eb7178;
}

#prezime.uredu {
  border: none;
}

#prezime.error {
  border: 2px solid #eb7178;
}

#faliime {
  display: none;
}

#faliime.promeni {
  display: flex;
  margin-top: 5px;
}

#faliime.promeni h5 {
  color: #eb7178;
}

#faliprezime {
  display: none;
}

#faliprezime.promeni {
  display: flex;
  margin-top: 5px;
}

#faliprezime.promeni h5 {
  color: #eb7178;
}

<form class="container" method="post" action="" autocomplete="off" id="formareg" enctype="multipart/form-data" novalidate>
  <h3>Ime*</h3>
  <input type="text" name="ime" id="ime" class="input" placeholder="Ime" required>

  <div id="faliime">
    <h5 class="crvena">Unesi ime</h5>
  </div>

  <h3>Prezime*</h3>
  <input type="text" name="prezime" id="prezime" class="input" placeholder="Prezime" required>

  <div id="faliprezime">
    <h5 class="crvena">Unesi prezime</h5>
  </div>

  <h3>Email*</h3>
  <input type="email" name="email" id="email" class="input" placeholder="Email" required>

  <div id="faliemail">
    <h5 class="crvena">Unesi email</h5>
  </div>

  <h3>Lozinka*</h3>
  <input type="password" name="lozinka" id="lozinka" class="input" placeholder="Šifra" required>

  <div id="falilozinka">
    <h5 class="crvena">Unesi lozinku</h5>
  </div>

  <div class="buttoncontainerreg">
    <button class="button2b" name="button2b" type="submit" onclick="predajKorisnika();">Registruj se</button>
  </div>

  <div class="prikazilink" id="prikazilink">
    <a href="prijava.php" class="reroute" id="link">
      <p>Već imaš nalog? Prijavi se
        <p>
    </a>
    <div>
</form>

登录表单的工作方式是，当我提交带有空字段的表单时，我会显示falilozinka和faliemail div，输入字段会显示红色边框。只要我输入一些东西，字段就开始改变，边框消失。我有一个在我的网站上的形式，也是一样的工作。
问题是在注册，或第二种形式，我包括。email和lozinka字段正常工作。我有ime和prezime字段的问题。它们在提交时工作正常，只有空的部分会变成红色，但是当我试图在里面输入一些东西时，边框仍然是红色的，我不知道为什么。有人能帮帮我吗？