如何通过JS为空白/空值表单输入项动态应用红色placeholder伪类样式

实现方法 #

第一步：调整CSS规则 #

你当前的input::placeholder {color: red;}是全局生效的，需要改成仅当输入框带有invalid类时才触发占位符变红，替换为如下规则即可：

.invalid::placeholder {
  color: red;
}

你已有的输入框下边框变红的.invalid类规则无需修改。

第二步：补全现有JS逻辑 #

你当前的代码仅在校验不通过时添加invalid类，缺少校验通过时移除类的逻辑，同时原代码中邮箱校验的判断条件存在笔误（漏写.value），修改后的完整代码如下：

form.addEventListener("submit", (e) => {
  e.preventDefault(); // 阻止默认行为放最前面，避免校验出错时表单误提交
  if (nameValue.value === "" || nameValue.value == null) {
    nameError.innerText = "Please add your name!";
    inputs[1].classList.add("invalid");
  } else {
    nameError.innerText = "";
    inputs[1].classList.remove("invalid");
  }
  if (companyValue.value === "" || companyValue.value == null) {
    companyError.innerText = "Please add your companys name!";
    inputs[2].classList.add("invalid");
  } else {
    companyError.innerText = "";
    inputs[2].classList.remove("invalid");
  }
  if (titleValue.value === "" || titleValue.value == null) {
    titleError.innerText = "Please add your title!";
    inputs[3].classList.add("invalid");
  } else {
    titleError.innerText = "";
    inputs[3].classList.remove("invalid");
  }
  if (messageValue.value === "" || messageValue.value == null) {
    messageError.innerText = "Please leave a message!";
    inputs[4].classList.add("invalid");
  } else {
    messageError.innerText = "";
    inputs[4].classList.remove("invalid");
  }
  if (emailValue.value === "" || emailValue.value == null) {
    emailError.innerText = "Please add your email!";
    inputs[5].classList.add("invalid");
  } else {
    emailError.innerText = "";
    inputs[5].classList.remove("invalid");
  }
});

修改完成后即可实现需求：输入项为空/Null时，输入框下边框和占位符文字同时变红，校验通过后样式自动恢复。

可选优化 #

如果需要用户输入内容时实时移除错误样式，可以额外给所有输入框绑定input事件：

inputs.forEach(input => {
  input.addEventListener('input', () => {
    input.classList.remove('invalid');
  })
})

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