i have stuck with this. Just can't find how to manipulate JS and trick validation.
I wanna to trigger this - onkeyup when <input2 pwd> which is = to <input pwd>
.l_input:valid + span::after {
position: absolute;
content: '✓';
color: #009000;
font-size: 1vw;}
And this is my supper duper js
var check = function() {
if (document.getElementById('password').value == document.getElementById('c_password').value) {
document.getElementById('validity').is(':valid'); //FORCE :VALID
} else {document.getElementById('validity').is(':invalid'); // :INVALID
}} // 'validity' is span
Now css triggers after any symbol (coz it doesnt have pattern)
HTML:
<input onkeyup="check()" type=password id=password placeholder='Password'>
<input onkeyup="check()" type=password id=c_password placeholder='Confirmation Password'>
SOLUTION:
function check() {
if (document.getElementById('password').value == document.getElementById('c_password').value) {
document.getElementById('c_password').setCustomValidity('');
} else {document.getElementById('c_password').setCustomValidity('Not matching'); }
}
This ^ JS makes document.getElementById('c_password') <INPUT> Invalid until i say.
In this way CSS :valid // :invalid works the way i SET IT.
Which is less coding just few additional lines.
NOTE ! :
setCustomValidity('') // no string = valid
setCustomValidity('Not matching') // string is not displayed