注册表单ime/prezime字段输入时红色边框不消失问题求助

问题现象 #

登录表单验证功能正常：提交空字段时，提示框显示、输入框出现红色边框；输入内容后，边框消失。但注册表单中，email和lozinka字段表现正常，ime和prezime字段仅在提交空值时显示红色边框，输入内容后红色边框始终无法消失。

登录表单代码 #

JavaScript #

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

CSS #

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

HTML #

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

注册表单代码 #

JavaScript #

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

CSS #

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

HTML #

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

问题分析 #

问题出在CSS选择器优先级和类名切换逻辑上：

1. 提交表单时，ime和prezime被添加了error类，但输入内容时，仅添加了uredu类，没有移除error类。
2. #ime.error和#ime.uredu的选择器优先级相同，而注册表单CSS里#ime.error写在#ime.uredu之后，导致错误状态的边框样式始终覆盖有效状态。
3. 登录表单的CSS中uredu样式在error之后，所以能覆盖错误样式，问题未暴露；但注册表单CSS顺序相反，矛盾显现。

修复方案 #

方案1：调整CSS顺序 #

将uredu类样式放在error类之后，确保有效状态样式能覆盖错误状态：

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

#ime.uredu {
  border: none;
}

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

#prezime.uredu {
  border: none;
}

方案2：完善JS逻辑（更严谨） #

在输入和提交时，同步切换error和uredu类，确保同一时间只有一个状态类存在：

// 提交事件修改
form.addEventListener('submit', (event) => {
  // 处理ime
  const imeIsValid = ime.validity.valid;
  ime.classList.toggle('error', !imeIsValid);
  ime.classList.toggle('uredu', imeIsValid);
  faliime.classList.toggle('promeni', !imeIsValid);

  // 处理prezime
  const prezimeIsValid = prezime.validity.valid;
  prezime.classList.toggle('error', !prezimeIsValid);
  prezime.classList.toggle('uredu', prezimeIsValid);
  faliprezime.classList.toggle('promeni', !prezimeIsValid);

  // 处理email和lozinka同理...

  if (!imeIsValid || !prezimeIsValid || !email.validity.valid || !lozinka.validity.valid) {
    event.preventDefault();
  }
});

// 输入事件修改
ime.addEventListener('input', () => {
  const isValid = ime.validity.valid;
  ime.classList.toggle('uredu', isValid);
  ime.classList.toggle('error', !isValid);
});

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

内容的提问来源于stack exchange，提问作者user21626341