Question

提交后我无法删除验证，它还会在成功发送消息后显示验证。

我已尝试在成功提交所有输入字段之后提交并删除，但验证仍然保持不变，它显示每个输入字段的验证图标。

$('#formid').on('submit', function(e) {

  // if the validator does not prevent form submit
  if (!e.isDefaultPrevented()) {
    var url = "process.php";

    // POST values in the background the the script URL
    $.ajax({
      type: "POST",
      url: url,
      data: $(this).serialize(),
      success: function(data) {
        var messageAlert = 'alert-' + data.type;
        var messageText = data.message;
        // let's compose Bootstrap alert box HTML
        var alertBox = '<div class="alert ' + messageAlert + 'alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>' + messageText + '</div>';
        if (messageAlert && messageText) {

          $('#formid').find('.messages').html(alertBox);
          $('#formid').resetForm();
          $('#formid')[0].reset();

        }
      }
    });
    return false;
  }
});

Answer 1

从.was-validated中删除<form>类将隐藏验证。

https://getbootstrap.com/docs/4.0/components/forms/#validation

Bootstrap将:invalid和:valid样式的作用域扩展到父.was-validated类，通常应用于<form>。否则，任何没有值的必填字段在页面加载时都将显示为无效。这样，您可以选择何时激活它们（通常在尝试提交表单之后）。

Answer 2

classList.remove("was-validated"); https://codepen.io/saurabh111121/pen/ExgbmgR

Answer 3

根据ceejayoz的建议，您可以通过拨打电话来删除was-validate通话

$('#formid').removeClass('was-validated')

请注意，was-validated是在您提交表单时添加的。您只需在浏览器中进行调试，您就会在调用Submit之后看到表单拥有的所有类。

Answer 4

<块引用>

Bootstrap 将 :invalid 和 :valid 样式范围限定到父级 .was-validated 类，通常应用于 .否则，任何没有值的必填字段在页面加载时显示为无效。这方式，您可以选择何时激活它们（通常在表单之后正在尝试提交）。

重置表单的外观（例如，在使用 AJAX 的动态表单提交），删除 .was-validated 类从再次提交后。

Check this page

你需要添加这一行：

$('#formid').removeClass('was-validated')

内部：

$.ajax({...})
.done(function() {
    //THE LINE GOES HERE
),
.always({...});

这个答案归功于@juan-martín-pagella 和@HazemGomaa，因为我使用了他们的两个答案来提出这个答案并解决了我遇到的类似问题。

bootstrap-4表单在提交后删除验证

4 个答案: