HTML Demos

Demo en vivo — intenta enviar vacío

borde verde/rojo — es solo CSS, sin JS: input:valid y input:invalid.

:not(:placeholder-shown) — evita marcar en rojo un campo vacío que aún no ha tocado el usuario.

Código importante

copiar<!-- required: no puede enviarse vacío -->
<input required>

<!-- minlength / maxlength -->
<input minlength="3" maxlength="20">

<!-- pattern: expresión regular -->
<input pattern="[a-zA-Z0-9_]+">

<!-- min / max para números y fechas -->
<input type="number"
       min="18" max="120">
<input type="date"
       min="1900-01-01"
       max="2006-01-01">

<!-- type=email valida formato solo -->
<input type="email" required>

<!-- Contraseña con regex personalizado -->
<!-- (?=.*\d) = debe contener al menos 1 número -->
<input type="password"
       minlength="8"
       pattern="(?=.*\d).{8,}">

<!-- novalidate: desactiva todo -->
<form novalidate>...</form>

<!-- CSS: feedback visual sin JS -->
input:valid:not(:placeholder-shown) {
  border-color: green;
}
input:invalid:not(:placeholder-shown) {
  border-color: red;
}