Bootstrap表单验证成功后跳转及错误提示不展示问题咨询

问题根因 #

你写的跳转逻辑$(location).attr('href', 'data.html')没有加执行限制，无论表单验证是否通过都会运行。你阻止的只是表单的默认提交行为，JS主动触发的页面跳转不受这个限制，因此才会出现看不到错误提示直接跳转的问题。

修复后完整JS代码 #

$(function () {
  'use strict'
  $('#data_input').on('submit', function (event) {
    // 先统一阻止默认提交行为，所有逻辑自行控制
    event.preventDefault()
    event.stopPropagation()

    if (this.checkValidity()) {
      // 仅验证通过时执行跳转
      $(location).attr('href', 'data.html');
    }

    // 无论验证是否通过，都添加样式类展示对应反馈提示
    $(this).addClass('was-validated')
  });

  $("#resetbtn").on("click", function (event) {
    event.preventDefault();
    $('#data_input')
      .trigger("reset")
      .removeClass('was-validated')
  });
});

修改说明 #

• 去掉了原逻辑中无判断的跳转代码，将跳转逻辑放在验证通过的分支内
• 统一提前阻止表单默认提交，避免出现验证通过后表单重复提交的问题
• 保留was-validated类的添加逻辑，验证不通过时Bootstrap会自动展示对应字段的错误提示

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