输入框required校验提示不消失，表单提交按钮持续禁用问题

这种情况我在处理动态渲染的表单元素（比如partial里的集合字段）时遇到过好几次，核心问题通常是浏览器的原生验证状态没有随输入内容更新，即使你移除了novalidate属性也没用。下面给你几个针对性的解决思路：

1. 手动触发验证状态更新 #

浏览器对动态添加的元素（比如partial渲染的集合字段）可能不会自动监听输入变化来更新验证状态，你可以给输入框绑定input事件，每次输入时强制重新验证字段并更新按钮状态：

// 给你的集合文本框加个统一类名，比如.collection-required-input
document.querySelectorAll('.collection-required-input').forEach(input => {
  input.addEventListener('input', function() {
    // 重置字段的自定义验证消息（清除之前的错误提示）
    this.setCustomValidity('');
    // 触发原生验证，更新字段状态
    this.checkValidity();
    
    // 找到所属表单，更新提交按钮的禁用状态
    const form = this.closest('form');
    const submitBtn = form.querySelector('button[type="submit"]');
    submitBtn.disabled = !form.checkValidity();
  });
});

2. 处理动态渲染后的元素绑定 #

如果你的partial是异步加载/动态插入DOM的（比如通过AJAX、Turbo或者框架组件渲染），上面的代码可能只会绑定初始渲染的元素。这时候需要在元素渲染完成后重新执行绑定逻辑，或者用MutationObserver监听DOM变化，自动给新插入的输入框绑定事件：

// 监听表单内的元素变化，自动绑定新输入框的事件
const form = document.querySelector('your-form-selector');
const observer = new MutationObserver(mutations => {
  mutations.forEach(mutation => {
    if (mutation.addedNodes.length) {
      mutation.addedNodes.forEach(node => {
        if (node.classList?.contains('collection-required-input')) {
          // 绑定input事件逻辑
          node.addEventListener('input', function() {
            this.setCustomValidity('');
            this.checkValidity();
            const form = this.closest('form');
            const submitBtn = form.querySelector('button[type="submit"]');
            submitBtn.disabled = !form.checkValidity();
          });
        }
      });
    }
  });
});

observer.observe(form, { childList: true, subtree: true });

3. 检查自定义验证/脚本冲突 #

如果页面上有其他自定义表单验证脚本，可能会和原生验证冲突，覆盖了原生的状态更新逻辑。你可以暂时禁用其他验证脚本，测试是否是这个原因导致的。另外，还要检查有没有在提交事件里手动设置按钮禁用后未重置的逻辑。

4. 强制重置验证状态（极端情况） #

如果以上方法都没用，可以在输入框获取焦点时强制重置字段的验证状态（不会清空输入内容）：

input.addEventListener('focus', function() {
  this.setCustomValidity('');
  this.checkValidity();
});

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