嘿，这个场景我太熟悉了！你之前用按钮点击事件的方法确实能生效，但有个小问题——如果用户通过回车键提交表单，按钮的click事件不会触发，这时候你的表单就加不上form-feedback类了。下面给你两个更通用、更贴合HTML5表单验证机制的解决方案：

方法一：监听invalid事件（推荐） #

HTML5表单验证不通过时，每个无效的表单控件会触发invalid事件。不过这个事件默认不会冒泡，所以我们需要在表单元素上开启捕获模式来监听它，这样只要表单里有任何控件验证失败，就能触发表单层面的处理逻辑：

const myForm = document.getElementById('my-form');

// 捕获invalid事件，验证失败时添加类
myForm.addEventListener('invalid', function() {
  this.classList.add('form-feedback');
}, true); // 第三个参数设为true，开启捕获模式

// 验证通过提交时，移除类
myForm.addEventListener('submit', function() {
  this.classList.remove('form-feedback');
});

这个方法的优势在于：不管用户是点击提交按钮，还是用回车键提交，只要验证失败，都会触发invalid事件，完美覆盖所有提交场景。

方法二：手动检查表单有效性 #

如果你更倾向于主动控制验证时机，可以在表单上监听提交相关的操作，手动调用checkValidity()方法判断表单是否有效：

const myForm = document.getElementById('my-form');

myForm.addEventListener('submit', function(e) {
  // 验证通过时移除类
  this.classList.remove('form-feedback');
});

// 监听提交按钮点击
myForm.addEventListener('click', function(e) {
  if (e.target.type === 'submit') {
    this._handleValidationFeedback();
  }
});

// 监听输入框回车提交
myForm.addEventListener('keydown', function(e) {
  if (e.key === 'Enter' && e.target.tagName === 'INPUT') {
    this._handleValidationFeedback();
  }
});

// 封装检查逻辑
myForm._handleValidationFeedback = function() {
  if (!this.checkValidity()) {
    this.classList.add('form-feedback');
    // 不要阻止默认行为，否则HTML5的原生验证提示不会显示
  }
};

这个方法更灵活，但代码量稍大，适合需要自定义更多验证逻辑的场景。

为什么CSS方案不适用？ #

你提到之前查到的都是CSS方案，比如:invalid伪类，但它的问题在于：只要表单控件的值不符合规则，哪怕用户还没提交表单，:invalid就会生效。而你的需求是用户提交后验证不通过才添加反馈类，所以纯CSS方案无法区分“未提交的无效状态”和“提交后的无效状态”，这就是它不适用的原因。

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