bootstrap-4 form remove validations after submit

Question

I can't remove validations after submit, it's showing validations after successful message also.

I have tried to submit after successfull submission all input fields and removed but validations remain same it's showing validation icons for every input field.

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

Possible duplicate of [Bootstrap validator for modal doesnt reset Form](https://stackoverflow.com/questions/27392082/bootstrap-validator-for-modal-doesnt-reset-form) — , Jan 10 '19 at 13:42

score 5 · Answer 1 · answered Jan 10 '19 at 13:41

5

Removing the .was-validated class from the <form> will hide the validations.

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

Bootstrap scopes the :invalid and :valid styles to parent .was-validated class, usually applied to the <form>. Otherwise, any required field without a value shows up as invalid on page load. This way, you may choose when to activate them (typically after form submission is attempted).

answered Jan 10 '19 at 13:41

ceejayoz

176,543
40
303
368

i didn't have .was-validated in my form – Shiva Jan 11 '19 at 05:32

score 4 · Answer 2 · answered Jun 18 '20 at 04:07

as ceejayoz suggested, you can remove was-validate calls by calling

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

Note that was-validated got added when you submit the form.You can simply debug in your browser and you will see all the classes that got that your form have after you invoke submit.

Sparrow · Answer 3 · 2020-12-25T15:52:42.880

1

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

edited Dec 25 '20 at 15:52

answered Dec 25 '20 at 15:34

Sparrow

19
3

try to add the asnwer of your codepen here as well, your answer loses its value if the codepen link does not work any longer. So refrain from writing link only answers, so also provides code running of html,css, basic js – bhucho Dec 25 '20 at 17:17

score 0 · Answer 4 · answered Apr 26 '21 at 04:55

Bootstrap scopes the :invalid and :valid styles to parent .was-validated class, usually applied to the . Otherwise, any required field without a value shows up as invalid on page load. This way, you may choose when to activate them (typically after form submission is attempted).

To reset the appearance of the form (for instance, in the case of dynamic form submissions using AJAX), remove the .was-validated class from the again after submission.

Check this page

You need to add this line:

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

Inside:

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

The credit to this answer goes to @juan-martín-pagella and to @HazemGomaa because I used both of their answers to come up with this answer and solve a similar issue I faced.

bootstrap-4 form remove validations after submit

4 Answers4