Yii2 ActiveForm点击提交按钮后help-block被移除问题咨询

看起来你遇到的是表单提交逻辑和验证提示交互的典型问题，我来帮你拆解下可能的原因和解决办法：

1. 先搞定两次POST请求的问题 #

这大概率是因为你没有阻止表单的默认提交行为。当你用JS处理表单提交（比如AJAX）时，浏览器会同时触发你写的JS请求，以及它自带的默认表单提交，就会出现两次POST。

解决起来很简单，在表单的submit事件处理里加上阻止默认行为的代码：

• 原生JS写法：

document.querySelector('your-form-selector').addEventListener('submit', function(e) {
  e.preventDefault(); // 关键：阻止浏览器默认提交
  // 你的验证、AJAX提交逻辑写在这里
});

• jQuery写法：

$('your-form-selector').on('submit', function(e) {
  e.preventDefault();
  // 后续验证和提交逻辑
});

2. 修复.help-block被错误移除的问题 #

你说不管验证过没过，提示都会消失，大概率是你的代码里有全局移除提示的逻辑，比如在提交按钮点击时，不管验证结果如何都执行了$('.help-block').remove()或者hide()。

调整思路：只在表单验证完全通过的时候，才清除错误提示；验证不通过时，保留甚至重新渲染提示。

举个常见的Bootstrap表单验证的例子：

$('your-form-selector').validator().on('submit', function(e) {
  if (!e.isDefaultPrevented()) { // 只有验证通过才走这里
    // 执行AJAX提交
    $.ajax({
      url: $(this).attr('action'),
      type: 'POST',
      data: $(this).serialize(),
      success: function(res) {
        // 提交成功后再清除提示和错误样式
        $('.form-group.has-error').removeClass('has-error');
        $('.help-block').remove();
        // 其他成功逻辑，比如提示用户
      }
    });
    e.preventDefault();
  }
  // 验证不通过的话，什么都不用做，让验证组件保留提示和红色边框
});

3. 红色边框保留但提示消失的问题 #

红色边框一般是验证库给输入框所在的.form-group加了.has-error类，而.help-block是单独的提示元素。如果提示没了但边框还在，说明你只移除了提示，没处理错误类。

解决办法：清除提示的时候，同时移除输入框的错误类（比如上面代码里的$('.form-group.has-error').removeClass('has-error')）；如果验证不通过，不要碰这些元素，让验证逻辑自己维护样式和提示。

额外排查小技巧 #

• 打开浏览器控制台，看看有没有JS报错，有时候脚本出错会导致逻辑混乱，意外移除元素；
• 检查你有没有写过自动隐藏所有.help-block的CSS或者定时器代码，比如setTimeout之类的，可能是这些代码在提交后触发了隐藏。

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