CSS表单验证问题：如何实现提交时才校验select字段有效性

看起来你遇到的是HTML5原生表单验证的默认行为问题——浏览器会在页面加载完成后就自动校验带有required属性的表单字段，这就是为什么没有空值<option>的select会一开始就显示无效样式。下面给你几个可行的解决方案，帮你实现「仅点击提交后才校验并显示错误」的需求：

核心思路：通过表单状态控制校验样式的触发时机 #

我们不能直接依赖原生的:invalid伪类（它会在页面加载时就生效），而是要给表单添加一个「已提交」的状态类，只有当这个类存在时，才应用错误样式。

步骤1：修改CSS规则 #

把你原来的CSS代码改成下面这样，只有当表单拥有submitted类时，才会给无效字段添加错误样式：

/* 初始状态使用默认样式，不显示错误 */
.form-validate input, 
.form-validate textarea, 
.form-validate select {
  border: 1px solid #ccc; /* 示例默认边框，可根据你的需求调整 */
}

/* 表单提交后，才显示错误样式 */
.form-validate.submitted input:invalid, 
.form-validate.submitted textarea:invalid, 
.form-validate.submitted select:invalid { 
  background: url(../img/error.png) no-repeat 98% center; 
  border: 1px solid #ebccd1; 
  box-shadow: 0 0 5px #d45252; 
  color: #a94442; 
}

步骤2：用JavaScript监听提交事件，添加状态类 #

给表单绑定submit事件，点击提交时给表单加上submitted类，同时校验表单有效性：

const form = document.querySelector('.form-validate');

form.addEventListener('submit', function(e) {
  // 标记表单为已提交状态
  this.classList.add('submitted');
  
  // 如果表单无效，阻止默认提交行为
  if (!this.checkValidity()) {
    e.preventDefault();
    // 可选：自动聚焦到第一个无效字段，提升用户体验
    const firstInvalidField = this.querySelector(':invalid');
    firstInvalidField?.focus();
  }
});

优化select的初始选项 #

建议你把select的初始选项改成下面这样，既符合语义，又能保证用户必须选择有效选项：

<select required>
  <option value="" disabled selected>请选择选项</option>
  <option value="option1">选项1</option>
  <option value="option2">选项2</option>
</select>

这个初始选项是禁用的，用户无法重新选中它，同时因为value=""，在表单提交前不会触发无效状态（因为我们的CSS只有提交后才生效）。

为什么input:not(:empty)没用？ #

:empty伪类是用来匹配元素内容为空的情况（比如<div></div>），但表单控件的有效性是基于它们的value属性和required等验证规则，和元素本身的内容无关，所以这个选择器无法达到你想要的效果。

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