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

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

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

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

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

Answer 2

正如ceejayoz建议的那样，您可以通过调用

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

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

Answer 3

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