如何在提交按钮处于禁用状态时触发表单必填字段校验

我完全懂你的痛点——当提交按钮处于禁用状态时，按下回车提交表单，浏览器居然不触发必填字段的校验提示，对吧？这其实是浏览器的默认行为：禁用状态的提交按钮不会触发表单的内置校验逻辑，哪怕你用回车尝试触发提交流程。下面给你几个实用的解决办法：

方案1：监听表单回车事件，手动触发校验 #

给表单绑定keydown事件，当检测到回车按键时，手动调用表单的校验API，强制触发提示。这样不管按钮是否禁用，回车提交都会先走校验流程：

const handleKeyDown = (e) => {
  if (e.key === 'Enter') {
    e.preventDefault(); // 阻止无校验的默认提交
    const form = document.getElementById('form');
    
    // 手动校验并显示提示
    if (!form.checkValidity()) {
      form.reportValidity();
    } else {
      // 校验通过再执行原有提交逻辑
      handleSubmit(e);
    }
  }
};

// 在表单上绑定事件
<form onSubmit={handleSubmit} id="form" onKeyDown={handleKeyDown}>
  <input required type="text"/>
  <input required type="text"/>
</form>
<MyButton type="submit" form="form" disabled={!allFieldsAreFilled}>
  Submit
</MyButton>

方案2：模拟禁用状态，而非真禁用按钮 #

放弃原生disabled属性，改用CSS模拟禁用的视觉效果，同时在按钮点击时手动判断字段状态。这样浏览器的默认回车提交逻辑会正常触发校验：

const handleButtonClick = (e) => {
  if (!allFieldsAreFilled) {
    const form = document.getElementById('form');
    form.reportValidity(); // 触发校验提示
    e.preventDefault();
    return;
  }
  // 字段填完后执行提交
  handleSubmit(e);
};

// 用className模拟禁用样式
<MyButton 
  type="submit" 
  form="form" 
  onClick={handleButtonClick}
  className={allFieldsAreFilled ? '' : 'disabled-btn'}
>
  Submit
</MyButton>

你需要自己定义disabled-btn的CSS样式，比如：

.disabled-btn {
  background-color: #ccc;
  cursor: not-allowed;
  opacity: 0.6;
}

方案3：完全接管表单校验逻辑 #

给表单加上novalidate属性关闭浏览器默认校验，然后在所有提交触发点（回车、按钮点击）统一执行手动校验，彻底掌控校验流程：

const handleFormSubmit = (e) => {
  e.preventDefault();
  const form = document.getElementById('form');
  
  if (form.checkValidity()) {
    // 校验通过，处理提交
    handleSubmit(e);
  } else {
    // 显示校验提示
    form.reportValidity();
  }
};

<form onSubmit={handleFormSubmit} id="form" novalidate>
  <input required type="text"/>
  <input required type="text"/>
</form>
<MyButton type="submit" form="form" disabled={!allFieldsAreFilled}>
  Submit
</MyButton>

这种方案灵活性最高，能避免不同浏览器默认行为的差异。

内容的提问来源于stack exchange，提问作者David Díaz