bootstrap-4 form remove validations after submit

user_8023312 0
Viewed 4046

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;
  }
});
bootstrap-4 html php jquery ajax
4 Answers

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).

ceejayoz_19020100

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.

user_37323370
user_108225300

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.

user_43186410
Related