How to validate form when user clicks elsewhere - html

Question

For the sign up form I am making, I want to validate passwords so that a user must enter a password that includes at least one capital letter and at least one number.
I have implemented this here:
http://jsfiddle.net/k9aHV/1/
<form action="login.php" method="post">
<p><b>UserName:</b> <input type="text" required pattern="\w+" name="fname"/></p>
<p><b>Password:</b> <input type="password" required pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])\w{6,}" name="password" onblur="this.setCustomValidity(this.validity.patternMismatch ? 'Password must contain at least 6 characters, including UPPER/lowercase and numbers' : '');if(this.checkValidity()) form.password1.pattern = this.value;"></p>
<p><b>Confirm Password:</b> <input type="password" required pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])\w{6,}" name="password1" onblur="
this.setCustomValidity(this.validity.patternMismatch ? 'Please enter the same password as above' : '');"/></p>
<p><b>Email:</b> <input type="email" name="email"/></p>
<input type="submit"/>
</form>
At the moment, the field is validated only when the user presses submit.
How can I adjust my code so that the code is validated as soon as the user tabs or clicks away from the input field?

Answer 1

You can trigger native validation on blur like so
input.addEventListener('blur', function(e) {
e.target.checkValidity();
});
The problem is you can't trigger the validation error popup programmatically.
One workaround is to programmatically click the submit button BUT the popup will only show the first invalid input element!
A more user friendly solution is to show the validation message in an element.
See this JSFiddle
var idx;
var passwordInputs = document.querySelectorAll('input[type="password"]');
for(idx=0; idx< passwordInputs.length; idx++) {
//set custom validation
passwordInputs[idx].addEventListener('input', function(e) {
if(e.target.validity.patternMismatch) {
e.target.setCustomValidity('Password must contain at least 6 characters, including UPPER/lowercase and numbers');
}
else {
e.target.setCustomValidity('');
}
});
}
//code starting here is to show the validation message in a span element
function showValMessage(elem, msg) {
var span = elem.parentNode.querySelector('span');
span.innerText = msg;
}
var inputs = document.querySelectorAll('input');
for(idx=0; idx< inputs.length; idx++) {
var input = inputs[idx];
//validate on blur
input.addEventListener('blur', function(e) {
e.target.checkValidity();
});
//show validation message
input.addEventListener('invalid', function(e) {
showValMessage(e.target, e.target.validationMessage);
});
//hide validation message. There is on valid event :(
input.addEventListener('input', function(e) {
if(e.target.validity.valid) {
showValMessage(e.target, '');
}
});
}