Documentation is missing how to reset the form validation

[burzum]

• 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');
				}
			});
		});
	}

[bkdotcom]

not a bootstrap issue?
try $('#contact-form input').val('').trigger("change");
maybe add $('#contact-form input').each(function(){ this.setCustomValidity(''); }); to the mix

[burzum]

@bkdotcom well, I think it is, because why is there no way to en/disable validation? I couldn't find anything in the docs related to the JS part of the validation besides the part I've already linked.

[patrickhlauke]

bootstrap doesn't provide validation per se. it provides styles that hook into the browser's own validation. how to trigger or reset the browser's own validation is therefore slightly outside of what bootstrap itself does (though having an example of how it's reset may be useful, granted...but that's just basic JS, not really related to bootstrap itself)

[burzum]

@patrickhlauke OK, if it's so basic, just point me to any place that shows how to disable the constraint API validation temporary for a form. :) I'm browsing the Mozilla docs for some time now without success and I'm about to drop this in favor of the Jquery Validation plugin. I've already read this and this without finding what I'm looking for. I can't even find what I'm looking for on Stackoverflow and Google, the search results always come up with the novalidate attribute. :(

[patrickhlauke]

i did not say it's basic. i said it's a feature of HTML and the browser, not a bootstrap feature, and it's not necessarily the point of bootstrap's documentation how to use HTML and its related APIs.

how to disable the browser's native validation/constraints API for a form? add novalidate to the form (or formnovalidate to a specific form control) https://www.w3.org/TR/html53/sec-forms.html#element-attrdef-form-novalidate [edit: corrected, as i got myself mixed up: it's indeed novalidate on the form is correct; on individual form controls, it's formnovalidate. confusing, but yeh...]

[burzum]

@patrickhlauke let me try that, if that works it should be added to the docs besides the correction of the novalidate. This took me now almost 2h in total. :(

Tried it: Doesn't work either.

[patrickhlauke]

looking at your thread opener, you're doing some custom javascript. please provide a live working example (in something like codepen or similar), but again fundamentally this does not look like a bootstrap issue - but related to either your javascript, or how browsers handle validation for forms like yours that are not really submitting, but rather ajaxing things.

[burzum]

@patrickhlauke https://codepen.io/anon/pen/rJGmoj

The only custom JS I've added in the pen above is this:

let form = $('#test-form');

form.find('button').on('click', (event) => {
  form.find('input, select, textarea').val('');
});

Everything else is a copy and paste job from the bootstrap docs, except the form id I've added. You can see how it invalidates all fields after setting them to no value. I would like to prevent validation and then put it back on when I reset the field.

Yes, I agree it is not directly a bootstrap issue but this is something many people probably will run into because bootstrap favors the vanilla constraint API in the docs. I'm pretty surprised there seems to be no simple way to do what I want because I think it is not that unusual?

[bkdotcom]

@burzum are you using angular? what extensions/plugins/modules/components (whatever anguar calls plugins nowdays)? Probably some form validation stuff going on with your angular framework/stack

[burzum]

@bkdotcom check the codepen link (same as above), no, I don't use Angular or anything else. Just jquery. We're using Vue.js at work but I need this form for a simple static HTML5 page I'm working on for my photography hobby.

[patrickhlauke]

in your codepen, you're clearing the form fields on the click. this is executed before the validity check on submit. so in essence, the user can fill in the form correctly, click submit, then just before the validation kicks in, you're emptying the fields again...making form submission fail and the errors appear...

[patrickhlauke]

if you are executing custom javascript on submission, you should really do the validation and your own logic in a single custom code block, rather than relying on the javascript example used in the docs to prevent submission on errors AND also hooking in your own code (on the submit event, looking at your thread starter code), as i'd hazard a guess that there are likely inconsistencies of when one or the other execute.

[burzum]

@patrickhlauke updated the codepen to use submit, doesn't work either:

form.on('submit', (event) => {
  form.find('input, select, textarea').val('');
});

Well, I thought the docs provide a generic approach to all forms on a page. I just have one form in my case but there can be cases with many forms on a page.

[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