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

【问题标题】：bootstrap-4 form remove validations after submitbootstrap-4 表单在提交后删除验证
【发布时间】：2019-06-05 09:01:06
【问题描述】：

提交后我无法删除验证，成功消息后也会显示验证。

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

$('#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;
  }
});

【问题讨论】：

Bootstrap validator for modal doesnt reset Form的可能重复

标签： php jquery ajax html bootstrap-4

【解决方案1】：

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

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

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

【讨论】：

我的表单中没有 .was-validated

【解决方案2】：

正如 ceejayoz 建议的那样，您可以通过调用删除 was-validate 调用

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

请注意，was-validated 是在您提交表单时添加的。您可以简单地在浏览器中进行调试，您将看到在调用提交后您的表单具有的所有类。

【讨论】：

【解决方案3】：

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

【讨论】：

也尝试在此处添加您的 codepen 的答案，如果 codepen 链接不再起作用，您的答案将失去其价值。所以不要只写链接答案，所以也提供html,css,basic js的代码运行

【解决方案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，因为我使用了他们的两个答案来得出这个答案并解决了我遇到的类似问题。

【讨论】：