HTML required属性搭配input.invalid、valid样式加载即红框问题咨询

问题原因 #

空的必填输入框默认满足HTML :invalid 伪类的匹配规则，如果你是页面加载时就给所有校验不通过的输入框添加了invalid类，或是直接用了未做限制的:invalid伪类样式，就会出现页面刚加载输入框就变红的问题。

可行解决方案 #

方案1：CSS伪类组合实现（无需额外JS，兼容性较好） #

利用:placeholder-shown伪类限制错误样式的触发时机，仅在用户输入内容后才显示校验状态：

1. 给所有必填输入框添加一个空的placeholder属性：

<input id="name" type="text" pattern="[a-zA-Z]+" required="required" placeholder=" " />

2. 修改CSS样式，无需自己维护valid/invalid类，直接用原生校验伪类：

/* 仅输入框非空、校验不通过时显示红色边框 */
input:invalid:not(:placeholder-shown) {
  border-color: red;
}

/* 默认状态、校验通过时显示绿色边框 */
input, input:valid {
  border-color: green;
}

逻辑说明：输入框为空时会触发:placeholder-shown匹配，就不会应用红色边框样式，只有用户输入内容后占位符隐藏，才会触发格式校验，样式才会对应切换。

方案2：JS控制校验类的添加时机 #

仅在用户和输入框交互后再添加校验状态类，初始状态不添加任何校验类：

1. 保留你原来的CSS样式不变
2. 添加如下JS代码：

const requiredInputs = document.querySelectorAll('input[required]');
requiredInputs.forEach(input => {
  // 监听失焦事件，用户操作过输入框后再校验
  input.addEventListener('blur', () => {
    if(input.checkValidity()) {
      input.classList.remove('invalid');
      input.classList.add('valid');
    } else {
      input.classList.remove('valid');
      input.classList.add('invalid');
    }
  });
});

方案3：兼容旧浏览器的提交后校验方案 #

如果需要兼容不支持:placeholder-shown的旧版浏览器，可以只在用户第一次提交表单后才显示错误样式：

1. 给表单标签默认添加no-validate类：

<form class="no-validate">
  <!-- 表单内容 -->
</form>

2. 修改CSS：

input.invalid {
  border-color:red;
}

input, input.valid, form.no-validate input.invalid {
  border-color: green;
}

3. 绑定表单提交事件，第一次提交时移除no-validate类即可。

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