使用Bootstrap表单验证时重置表单无法清除错误类如何解决

问题根因 #

Bootstrap 原生表单校验的错误/成功提示依赖表单元素上的was-validated类，你在提交校验时给表单添加了这个类，但重置表单时仅清空了输入值，没有移除该类，所以校验提示会持续展示。

解决方案 #

仅需要调整重置按钮的点击事件逻辑即可：

$("#resetbtn").on("click", function(e) {
  e.preventDefault();
  const targetForm = $('#data_input');
  // 清空表单输入值
  targetForm.trigger("reset");
  // 移除校验触发类，隐藏所有校验提示
  targetForm.removeClass('was-validated');
  // 如果业务中会给单个输入框手动加校验类，可追加下面一行清除
  // targetForm.find('.is-invalid, .is-valid').removeClass('is-invalid is-valid');
});

修改后重置表单即可同时清空输入值和隐藏所有校验提示。

内容的提问来源于stack exchange，提问作者Mr.M