HTML proporciona validación integrada mediante atributos, por lo que el navegador bloquea los envíos inválidos y muestra mensajes — sin necesidad de JavaScript.
html
Submit
HTML proporciona validación integrada mediante atributos, por lo que el navegador bloquea los envíos inválidos y muestra mensajes — sin necesidad de JavaScript.
Submit
Los atributos de validación: required, min/max, minlength/maxlength, pattern (expresión regular), y el tipo en sí mismo (email, url, number). Al enviar, el navegador los verifica, detiene el envío si alguno falla, y muestra una burbuja nativa en el primer campo inválido.
input:invalid { border-color: red; }
input:valid { border-color: green; }
input:user-invalid { border-color: red; } /* only after the user has interacted — nicer UX */
Puedes leer y personalizar la validación en JavaScript:
const input = document.querySelector("input");
input.validity.valueMissing; // true if required and empty
input.validity.typeMismatch; // true if email/url format is wrong
input.checkValidity(); // returns boolean, fires invalid event
input.setCustomValidity("Passwords don't match"); // custom error message
setCustomValidity te permite agregar reglas que los atributos no pueden expresar (por ejemplo, "confirmar que la contraseña coincide").
<form novalidate>...</form> <!-- skip native validation (handle in JS) -->
Siempre valida también en el servidor — la validación del cliente es para la experiencia del usuario; los usuarios pueden pasarla por alto.
La validación nativa te proporciona mensajes de error accesibles y localizados, así como retroalimentación instantánea de forma gratuita.
Combina los atributos declarativos con la API de validación de restricciones para reglas personalizadas — pero nunca confíes en ella como tu única línea de defensa; el servidor también debe validar.