Bootstrap validation

[Adamhumbug]

HI All,

I am using bootstrap and have been using its validation on some of my forms.  Mainly for "required" fields.

I have run into a bit of a tricky situation when trying to use custom validation with bootstraps validation tools.

I have a user form where i collect name, email, password and a confirm password field.

The validation works great for name and email out of the box but i have created custom functions for password validation.

I have been adding and removing the is-valid class.  What i see on the screen is what i want to see, however, when i click the submit button, the password fields validate to "all good" when my validation is suggesting that they fail.

I got this from bootstraps documentation which works for the basic stuff

// Example starter JavaScript for disabling form submissions if there are invalid fields
	(function() {
		'use strict'

		// Fetch all the forms we want to apply custom Bootstrap validation styles to
		var forms = document.querySelectorAll('.needs-validation')

		// Loop over them and prevent submission
		Array.prototype.slice.call(forms)
			.forEach(function(form) {
				form.addEventListener('submit', function(event) {
					if (!form.checkValidity()) {
						event.preventDefault()
						event.stopPropagation()
					}

					form.classList.add('was-validated')
				}, false)
			})
	})()

I have a function like this that sets on of the fileds to fail validation if the passwords do not match

	$('#password2').keyup(function() {
		$p1 = $('#password1').val()
		$p2 = $('#password2').val()
		if ($p1 != $p2) {
			$('#password2').addClass("is-invalid")
			$('#password2').removeClass("is-valid")
			$('.passwordMatchCheck').text("Passwords do not match!")
		} else {
			$('#password2').removeClass("is-invalid")
			$('#password2').addClass("is-valid")
		}

	})

I am running into a situation where my validation and bootstraps are fighting and we end up having both valid and invalid messages.

 

I am either looking for a way of omitting these fileds from bootstraps validation method or pointers on the "proper" way to do this.

 

There is nothing i can find online that suggests how this would be done.

I want to try and avoid having to write validation for all states on every form when i need something custom on one filed if can help it.

[mac_gyver]

here's something that will save you a ton of duplicate effort.

client-side validation is a nicety for legitimate visitors. data sent to your web sever can come from anywhere, not just your forms/links/cookies, can be set to anything, despite any client-side validation you may have, and cannot be trusted. you must trim, mainly so that you can detect if a value is all white-space characters, then validate the trimmed data, on the server, before using it. since you must do this on the server, you should either just use the browser's built-in form validation or use ajax to send the piece(s) of data to the server for pre-submission validation, then validate it again, on the server, when the form has been submitted.