me he quedado con esto. Simplemente no puedo encontrar cómo manipular JS y engañar a la validación.
Quiero activar esto - onkeyup cuando <input2 pwd> que es = a <input pwd>
.l_input:valid + span::after { position: absolute; content: '✓'; color: #009000; font-size: 1vw;}Y esta es mi cena 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 spanAhora css se activa después de cualquier símbolo (porque no tiene patrón)
HTML:
<input onkeyup="check()" type=password id=password placeholder='Password'> <input onkeyup="check()" type=password id=c_password placeholder='Confirmation Password'>SOLUCIÓN:
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'); } } Este ^ JS hace que document.getElementById('c_password') <INPUT> no sea válido hasta que lo diga.
De esta manera, CSS :valid // :invalid funciona de la forma en que lo configuré.
Lo cual es menos codificación solo unas pocas líneas adicionales.
NOTA ! :
setCustomValidity('') // no string = valid setCustomValidity('Not matching') // string is not displayed