Documentation is missing how to reset the form validation

• I’ve read https://getbootstrap.com/docs/4.0/components/forms/#how-it-works
• I’ve used Google & Stackoverflow

I haven’t found a solution… What annoys me the most is that the documentation does not show how to reset or disable validation. I shouldn’t have to search the web for this common use case.

I want to clear the form after submission but the validation immediately jumps in and validates the now empty form fields again, resulting in showing errors.

	function formValidation() {
		// Validation -> https://getbootstrap.com/docs/4.0/components/forms/#validation
		// Fetch all the forms we want to apply custom Bootstrap validation styles to
		var forms = document.getElementsByClassName('needs-validation');
		// Loop over them and prevent submission
		var validation = Array.prototype.filter.call(forms, function (form) {
			form.addEventListener('submit', function (event) {
				if (form.checkValidity() === false) {
					event.preventDefault();
					event.stopPropagation();
					$(form).addClass('is-invalid');
				} else {
					$(form).addClass('is-valid');
				}
				form.classList.add('was-validated');
			}, false);
		});
	}

	function contactForm() {
		// Honeypot
		let honeypot = $('#contact-website');
		let contactForm = $('#contact-form');

		honeypot.parent('.form-group').hide();
		honeypot.removeAttr('required');

		contactForm.on('submit', (event) => {
			event.preventDefault();

			if (!contactForm.hasClass('is-valid')) {
				return;
			}

			$.ajax({
				type: 'POST',
				url: 'contact.php',
				data: contactForm.serialize(),
				success: () => {
					$('#contact-form input').val('');
					$('#contact-form textarea').val('');
					$('#modal').modal('show');
				}
			});
		});
	}

[patrickhlauke]

if you form wasn’t doing custom AJAX stuff and not actually submitting itself, the code provided in the documentation would work just fine. once you go off-piste with non-standard behaviour, then yes things will get bumpy. but we can’t include (nor foresee) all those situations in the documentation.

anyway, even though this is not a general case, but rather something that is down to your own implementation…here’s a rough solution https://codepen.io/patrickhlauke/pen/wyreOg

[kulketan]

I’m using below code to reset the form after successful validation and not get the red border.

var forms = document.getElementsByClassName('needs-validation');
		// Loop over them and prevent submission
		var validation = Array.prototype.filter.call(forms, function (form) {
			form.addEventListener('submit', function (event) {
				if (form.checkValidity() === false) {
					event.preventDefault();
					event.stopPropagation();
				} 
				form.classList.add('was-validated');
                                if(form.checkValidity() === true){
                                        //for is validated successfully. Here you can write ajax call or whatever
                                        form.classList.remove("was-validated");
                                        form.reset();
                                }
			}, false);
		});