Volver
Ctrl+Space
◑
Copiar
Descargar
Restaurar
Ejecutar
Ctrl+Enter
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>Validación personalizada</title> <style> /* Único CSS necesario: la parte que el tutorial explica (:invalid / :valid) */ input:not(:placeholder-shown):invalid { border: 2px solid red; } input:not(:placeholder-shown):valid { border: 2px solid green; } input:not(:placeholder-shown):invalid + .error-msg { display: block; } .error-msg { display: none; color: red; } </style> </head> <body> <h2>Validación personalizada</h2> <p>El formulario tiene <code>novalidate</code> — toda la validación la maneja JavaScript con <code>setCustomValidity()</code>.</p> <form id="miForm" novalidate> <label for="email">Email:</label><br> <input type="email" id="email" name="email" placeholder="usuario@ejemplo.com" required> <span class="error-msg">Ingresá un email válido.</span> <br><br> <label for="pass1">Contraseña:</label><br> <input type="password" id="pass1" name="pass1" placeholder="Mínimo 8 caracteres" required minlength="8"> <span class="error-msg">La contraseña necesita al menos 8 caracteres.</span> <br><br> <label for="pass2">Repetir contraseña:</label><br> <input type="password" id="pass2" name="pass2" placeholder="Repetí la contraseña" required> <span class="error-msg" id="msgPass2">Las contraseñas no coinciden.</span> <br><br> <button type="submit">Registrarse</button> </form> <p id="resultado"></p> <script> const pass1 = document.getElementById("pass1"); const pass2 = document.getElementById("pass2"); const form = document.getElementById("miForm"); function validarCoincidencia() { if (pass1.value !== pass2.value) { pass2.setCustomValidity("Las contraseñas no coinciden."); } else { pass2.setCustomValidity(""); // vacío = válido } } pass2.addEventListener("input", validarCoincidencia); pass1.addEventListener("input", () => { if (pass2.value) validarCoincidencia(); }); form.addEventListener("submit", (e) => { e.preventDefault(); if (!form.checkValidity()) { form.reportValidity(); return; } document.getElementById("resultado").textContent = "✅ Formulario válido — listo para enviar al servidor."; }); </script> </body> </html>