Validación nativa con atributos required y pattern

La validación de formularios es fundamental para garantizar que los usuarios envíen datos correctos y completos. HTML5 introdujo validaciones nativas que permiten verificar la información directamente en el navegador, sin necesidad de JavaScript.

Atributo required

El atributo required es uno de los más sencillos pero potentes para la validación de formularios. Cuando se aplica a un elemento de entrada, hace que ese campo sea obligatorio, impidiendo que el formulario se envíe si está vacío.

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" required>
  
  <button type="submit">Submit</button>
</form>

En este ejemplo, el navegador impedirá el envío del formulario si el campo de nombre de usuario está vacío. Cuando un usuario intenta enviar el formulario sin completar este campo, el navegador mostrará automáticamente un mensaje de error.

El atributo required funciona con la mayoría de los tipos de input:

<input type="text" required>
<input type="email" required>
<input type="number" required>
<input type="tel" required>
<input type="url" required>
<textarea required></textarea>
<select required></select>

Atributo pattern

El atributo pattern permite definir un patrón específico que debe cumplir el valor ingresado. Este patrón se define mediante una expresión regular (regex), que es un formato especial para describir patrones de texto.

<form>
  <label for="postal-code">Postal Code:</label>
  <input type="text" id="postal-code" name="postal-code" 
         pattern="[0-9]{5}" 
         title="Five digit zip code">
  
  <button type="submit">Submit</button>
</form>

En este ejemplo, el campo de código postal solo aceptará exactamente 5 dígitos. El atributo title proporciona una descripción del formato esperado, que se mostrará como información adicional al usuario.

Expresiones regulares comunes para pattern

Las expresiones regulares pueden ser complejas, pero aquí hay algunos patrones útiles para casos comunes:

Solo letras: pattern="[A-Za-z]+"
Solo números: pattern="[0-9]+"
Alfanumérico: pattern="[A-Za-z0-9]+"
Número de teléfono (formato xxx-xxx-xxxx): pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
Contraseña (mínimo 8 caracteres, al menos una letra y un número): pattern="(?=.*\d)(?=.*[a-zA-Z]).{8,}"

<form>
  <div>
    <label for="letters-only">Letters only:</label>
    <input type="text" id="letters-only" pattern="[A-Za-z]+" 
           title="Only letters allowed">
  </div>
  
  <div>
    <label for="phone">Phone (xxx-xxx-xxxx):</label>
    <input type="tel" id="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" 
           title="Format: xxx-xxx-xxxx">
  </div>
  
  <button type="submit">Submit</button>
</form>

Combinando required y pattern

Puedes combinar ambos atributos para crear validaciones más robustas:

<form>
  <label for="username">Username (letters and numbers only):</label>
  <input type="text" id="username" name="username" 
         required 
         pattern="[A-Za-z0-9]+" 
         title="Only letters and numbers allowed">
  
  <button type="submit">Submit</button>
</form>

En este caso, el campo debe estar completado (required) y además debe contener solo letras y números (pattern).

Validación para tipos específicos de input

Algunos tipos de input tienen validación incorporada sin necesidad de pattern:

<!-- Valida automáticamente que sea un email válido -->
<input type="email" required>

<!-- Valida automáticamente que sea una URL válida -->
<input type="url" required>

<!-- Valida automáticamente que sea un número -->
<input type="number" required>

Ejemplo práctico: Formulario de registro

Veamos un ejemplo más completo de un formulario de registro con validaciones nativas:

<form>
  <div>
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" 
           required 
           pattern="[A-Za-z0-9]{3,16}" 
           title="Username must be between 3-16 characters and contain only letters and numbers">
  </div>
  
  <div>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
  </div>
  
  <div>
    <label for="password">Password:</label>
    <input type="password" id="password" name="password" 
           required 
           pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" 
           title="Must contain at least one number, one uppercase and lowercase letter, and at least 8 characters">
  </div>
  
  <div>
    <label for="phone">Phone (xxx-xxx-xxxx):</label>
    <input type="tel" id="phone" name="phone" 
           pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" 
           title="Phone format: xxx-xxx-xxxx">
  </div>
  
  <button type="submit">Register</button>
</form>

Consideraciones importantes

La validación nativa de HTML5 es una primera línea de defensa, pero no reemplaza la validación en el servidor, que siempre debe implementarse.
No todos los navegadores muestran los mismos mensajes de error para las validaciones.
El atributo pattern solo funciona con elementos <input> que aceptan texto como entrada.
Los navegadores antiguos pueden no soportar estas validaciones, por lo que siempre es recomendable tener un plan de respaldo.

La validación nativa con los atributos required y pattern proporciona una forma sencilla pero efectiva de mejorar la experiencia del usuario y reducir errores en la entrada de datos, todo sin necesidad de escribir JavaScript adicional.

¿Te está gustando esta lección?

Inicia sesión para no perder tu progreso y accede a miles de tutoriales, ejercicios prácticos y nuestro asistente de IA.

Progreso guardado

Asistente IA

Ejercicios

Iniciar sesión gratis

Más de 25.000 desarrolladores ya confían en CertiDevs

Restricciones con min, max, minlength, maxlength

HTML5 ofrece atributos de restricción que permiten limitar los valores que los usuarios pueden introducir en los campos de formulario. Estos atributos complementan las validaciones que vimos anteriormente (required y pattern) y son especialmente útiles para establecer rangos válidos y longitudes de texto.

Restricciones numéricas: min y max

Los atributos min y max establecen los valores mínimos y máximos permitidos para campos numéricos. Estos atributos funcionan con los siguientes tipos de input:

type="number"
type="range"
type="date"
type="datetime-local"
type="month"
type="time"
type="week"

<form>
  <div>
    <label for="age">Age (18-100):</label>
    <input type="number" id="age" name="age" 
           min="18" 
           max="100">
  </div>
  
  <button type="submit">Submit</button>
</form>

En este ejemplo, el campo de edad solo aceptará valores entre 18 y 100. Si el usuario intenta introducir un valor fuera de este rango, el navegador mostrará un mensaje de error al intentar enviar el formulario.

Ejemplo con selector de rango

El tipo de input range crea un control deslizante y también puede utilizar min y max:

<div>
  <label for="satisfaction">Satisfaction level (1-10):</label>
  <input type="range" id="satisfaction" name="satisfaction" 
         min="1" 
         max="10" 
         value="5">
  <output for="satisfaction">5</output>
</div>

Restricciones para fechas

Los campos de tipo fecha también pueden tener restricciones de rango:

<div>
  <label for="appointment">Choose a date (next 30 days only):</label>
  <input type="date" id="appointment" name="appointment"
         min="2023-01-01" 
         max="2023-12-31">
</div>

Restricciones de longitud: minlength y maxlength

Los atributos minlength y maxlength limitan la cantidad de caracteres que se pueden introducir en campos de texto. Estos atributos funcionan con:

type="text"
type="email"
type="password"
type="tel"
type="url"
<textarea>

<form>
  <div>
    <label for="username">Username (4-12 characters):</label>
    <input type="text" id="username" name="username" 
           minlength="4" 
           maxlength="12">
  </div>
  
  <div>
    <label for="bio">Short bio (max 200 characters):</label>
    <textarea id="bio" name="bio" 
              maxlength="200"></textarea>
  </div>
  
  <button type="submit">Submit</button>
</form>

En este ejemplo:

El campo de nombre de usuario debe tener entre 4 y 12 caracteres
El campo de biografía no puede exceder los 200 caracteres

Comportamiento de minlength y maxlength

Es importante entender cómo se comportan estos atributos:

maxlength: Impide físicamente que el usuario escriba más caracteres de los permitidos
minlength: No impide escribir menos caracteres, pero muestra un error al intentar enviar el formulario

Combinando restricciones

Puedes combinar estos atributos con otras validaciones para crear reglas más completas:

<form>
  <div>
    <label for="password">Password:</label>
    <input type="password" id="password" name="password" 
           required
           minlength="8" 
           maxlength="20" 
           pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" 
           title="8-20 characters with at least one number, one uppercase and lowercase letter">
  </div>
  
  <button type="submit">Create Account</button>
</form>

Este campo de contraseña:

Es obligatorio (required)
Debe tener entre 8 y 20 caracteres (minlength/maxlength)
Debe seguir el patrón especificado (pattern)

Restricciones para campos numéricos con step

El atributo step complementa a min y max, definiendo los incrementos válidos para valores numéricos:

<div>
  <label for="donation">Donation amount ($):</label>
  <input type="number" id="donation" name="donation" 
         min="5" 
         max="1000" 
         step="5">
</div>

En este ejemplo, el campo solo aceptará valores que sean múltiplos de 5 (5, 10, 15, etc.) dentro del rango de 5 a 1000.

Ejemplo práctico: Formulario de reserva

Veamos un ejemplo más completo que utiliza varias restricciones:

<form>
  <h2>Hotel Reservation</h2>
  
  <div>
    <label for="full-name">Full Name:</label>
    <input type="text" id="full-name" name="full-name" 
           required 
           minlength="3" 
           maxlength="50">
  </div>
  
  <div>
    <label for="guests">Number of Guests:</label>
    <input type="number" id="guests" name="guests" 
           min="1" 
           max="4" 
           value="2">
  </div>
  
  <div>
    <label for="check-in">Check-in Date:</label>
    <input type="date" id="check-in" name="check-in" 
           required 
           min="2023-01-01">
  </div>
  
  <div>
    <label for="nights">Number of Nights:</label>
    <input type="number" id="nights" name="nights" 
           min="1" 
           max="14" 
           value="1">
  </div>
  
  <div>
    <label for="special-requests">Special Requests:</label>
    <textarea id="special-requests" name="special-requests" 
              maxlength="500"></textarea>
  </div>
  
  <button type="submit">Book Now</button>
</form>

Consideraciones importantes

Los navegadores aplican estas restricciones de forma diferente. Algunos muestran mensajes de error personalizados, mientras que otros utilizan mensajes genéricos.
El atributo maxlength es especialmente útil para campos que tienen límites en la base de datos, ya que evita que los usuarios introduzcan más datos de los que se pueden almacenar.
Para campos numéricos, es recomendable usar min y max junto con type="number" en lugar de usar pattern, ya que proporciona una mejor experiencia de usuario con los controles de incremento/decremento.
Aunque estas restricciones mejoran la experiencia del usuario, siempre debes implementar validaciones en el servidor, ya que las validaciones del lado del cliente pueden ser eludidas.
Para una mejor accesibilidad, es recomendable incluir información sobre las restricciones en las etiquetas o mediante el atributo title.

Estas restricciones de HTML5 proporcionan una forma sencilla de mejorar la calidad de los datos enviados por los usuarios sin necesidad de JavaScript adicional, aunque siempre es recomendable complementarlas con validaciones del lado del servidor.

Mensajes de error personalizados

Cuando trabajamos con formularios HTML, los navegadores muestran automáticamente mensajes de error cuando la validación falla. Sin embargo, estos mensajes predeterminados pueden no ser lo suficientemente descriptivos o no coincidir con el estilo de nuestro sitio web. HTML5 ofrece formas de personalizar estos mensajes para mejorar la experiencia del usuario.

El atributo title para mensajes personalizados

El atributo title es la forma más sencilla de personalizar los mensajes de error. Cuando se usa junto con atributos de validación como required o pattern, el navegador mostrará su contenido como parte del mensaje de error:

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" 
         required 
         title="Please enter your username">
  
  <button type="submit">Login</button>
</form>

Para campos con patrones específicos, el atributo title debe explicar claramente el formato esperado:

<label for="postal">Postal code:</label>
<input type="text" id="postal" name="postal" 
       pattern="[0-9]{5}" 
       title="Please enter a 5-digit postal code">

Mensajes específicos según el tipo de validación

Es recomendable proporcionar mensajes específicos que expliquen exactamente qué se espera:

<form>
  <div>
    <label for="password">Password:</label>
    <input type="password" id="password" name="password" 
           required 
           minlength="8" 
           pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" 
           title="Password must contain at least 8 characters, including uppercase, lowercase letters and numbers">
  </div>
  
  <button type="submit">Register</button>
</form>

Uso del elemento output para mensajes dinámicos

El elemento output puede usarse para mostrar mensajes personalizados basados en la entrada del usuario:

<form>
  <div>
    <label for="age">Age:</label>
    <input type="number" id="age" name="age" min="18" max="100" required>
    <output name="age-message" for="age"></output>
  </div>
  
  <button type="submit">Submit</button>
</form>

Mensajes de error con atributos data-*

Los atributos data-* permiten almacenar mensajes personalizados que pueden ser utilizados para mostrar errores específicos:

<form>
  <div>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" 
           required 
           data-error-required="Email address is required" 
           data-error-type="Please enter a valid email address">
    <span class="error-message"></span>
  </div>
  
  <button type="submit">Subscribe</button>
</form>

Mensajes personalizados para diferentes idiomas

Para sitios multilingües, puedes proporcionar mensajes de error en diferentes idiomas usando el atributo lang:

<form>
  <div>
    <label for="phone">Phone number:</label>
    <input type="tel" id="phone" name="phone" 
           required 
           pattern="[0-9]{9}" 
           title="Please enter a 9-digit phone number without spaces or dashes">
    
    <span lang="en" class="error-hint">Format: 9 digits</span>
    <span lang="es" class="error-hint">Formato: 9 dígitos</span>
  </div>
  
  <button type="submit">Contact me</button>
</form>

Mensajes de error accesibles

Para mejorar la accesibilidad, es importante que los mensajes de error sean perceptibles para todos los usuarios, incluidos aquellos que utilizan lectores de pantalla:

<form>
  <div>
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" 
           required 
           aria-describedby="username-error">
    <span id="username-error" class="error-message" role="alert"></span>
  </div>
  
  <button type="submit">Login</button>
</form>

El atributo aria-describedby vincula el campo con su mensaje de error, mientras que role="alert" asegura que los lectores de pantalla anuncien el mensaje cuando aparezca.

Mensajes de error para grupos de campos

Para validaciones que involucran múltiples campos, como confirmación de contraseña:

<form>
  <div>
    <label for="password">Password:</label>
    <input type="password" id="password" name="password" required minlength="8">
  </div>
  
  <div>
    <label for="confirm-password">Confirm password:</label>
    <input type="password" id="confirm-password" name="confirm-password" required>
    <span id="password-match-error" role="alert"></span>
  </div>
  
  <button type="submit">Create Account</button>
</form>

Ejemplo práctico: Formulario de contacto con mensajes personalizados

Veamos un ejemplo completo de un formulario de contacto con mensajes de error personalizados:

<form id="contact-form">
  <div>
    <label for="name">Full name:</label>
    <input type="text" id="name" name="name" 
           required 
           minlength="2" 
           maxlength="50" 
           title="Please enter your full name (2-50 characters)">
    <span class="error-hint">First and last name required</span>
  </div>
  
  <div>
    <label for="email">Email address:</label>
    <input type="email" id="email" name="email" 
           required 
           title="Please enter a valid email address">
    <span class="error-hint">Format: name@example.com</span>
  </div>
  
  <div>
    <label for="subject">Subject:</label>
    <select id="subject" name="subject" required title="Please select a subject">
      <option value="">-- Select a subject --</option>
      <option value="question">Question</option>
      <option value="feedback">Feedback</option>
      <option value="support">Support</option>
    </select>
  </div>
  
  <div>
    <label for="message">Message:</label>
    <textarea id="message" name="message" 
              required 
              minlength="10" 
              maxlength="500" 
              title="Please enter your message (10-500 characters)"></textarea>
    <span class="error-hint">Min 10 characters, max 500</span>
  </div>
  
  <button type="submit">Send Message</button>
</form>

Consideraciones importantes

Los mensajes de error personalizados con el atributo title funcionan en la mayoría de los navegadores modernos, pero la presentación visual puede variar.
Para una personalización más avanzada de los mensajes de error (como cambiar colores, posición o animaciones), necesitarás usar CSS y posiblemente JavaScript.
Siempre proporciona mensajes claros y específicos que ayuden al usuario a corregir el error, evitando términos técnicos que puedan confundir.
Los mensajes de error deben ser concisos pero informativos, indicando exactamente qué se espera del usuario.
Considera la accesibilidad al diseñar mensajes de error, asegurándote de que sean perceptibles para todos los usuarios, incluidos aquellos con discapacidades visuales.
Recuerda que los mensajes personalizados son solo una parte de una buena experiencia de usuario; también debes considerar el diseño visual de los errores (como cambios de color o iconos) para hacerlos más evidentes.

La personalización de mensajes de error es una parte importante para crear formularios amigables que guíen al usuario a completar correctamente la información solicitada, mejorando así la tasa de conversión y reduciendo la frustración.

Estado de validación con pseudoclases

HTML5 no solo proporciona atributos para validar formularios, sino que también ofrece un conjunto de pseudoclases CSS que permiten aplicar estilos específicos según el estado de validación de los campos. Estas pseudoclases son extremadamente útiles para proporcionar retroalimentación visual inmediata a los usuarios mientras completan un formulario.

Pseudoclases de validación básicas

Las pseudoclases más importantes para trabajar con estados de validación son:

:valid - Se aplica cuando el campo cumple con todas las restricciones de validación
:invalid - Se aplica cuando el campo no cumple con alguna restricción de validación
:required - Se aplica a elementos que tienen el atributo required
:optional - Se aplica a elementos que no tienen el atributo required

Estas pseudoclases pueden utilizarse directamente en el elemento <style> dentro del documento HTML:

<head>
  <style>
    input:valid {
      border: 2px solid green;
    }
    
    input:invalid {
      border: 2px solid red;
    }
  </style>
</head>
<body>
  <form>
    <label for="email">Email:</label>
    <input type="email" id="email" required>
    
    <button type="submit">Submit</button>
  </form>
</body>

En este ejemplo, el campo de email mostrará un borde verde cuando contenga una dirección de email válida, y un borde rojo cuando esté vacío o contenga un formato inválido.

Pseudoclases para estados específicos

Además de las pseudoclases básicas, HTML5 ofrece pseudoclases más específicas:

:in-range - Para campos numéricos dentro del rango especificado (min/max)
:out-of-range - Para campos numéricos fuera del rango especificado
:required - Para campos con el atributo required
:optional - Para campos sin el atributo required

<style>
  input:in-range {
    background-color: #e8f5e9;
  }
  
  input:out-of-range {
    background-color: #ffebee;
  }
</style>

<form>
  <label for="age">Age (18-65):</label>
  <input type="number" id="age" min="18" max="65">
</form>

Control de la retroalimentación visual

Un problema común con estas pseudoclases es que se aplican inmediatamente, incluso antes de que el usuario comience a escribir. Para evitar mostrar errores prematuramente, podemos combinarlas con otras pseudoclases como :focus o :placeholder-shown:

<style>
  /* Estilo inicial neutro */
  input {
    border: 2px solid #ccc;
  }
  
  /* Mostrar validación solo después de que el usuario interactúe */
  input:not(:placeholder-shown):valid {
    border-color: green;
  }
  
  input:not(:placeholder-shown):invalid {
    border-color: red;
  }
</style>

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" required minlength="4" placeholder=" ">
</form>

En este ejemplo, los estilos de validación solo se mostrarán después de que el usuario comience a escribir (cuando el placeholder ya no se muestre).

Combinando pseudoclases para mayor control

Podemos combinar varias pseudoclases para crear reglas más específicas:

<style>
  /* Campos opcionales con un estilo sutil */
  input:optional {
    border: 1px solid #ddd;
  }
  
  /* Campos requeridos con un indicador visual */
  input:required {
    border-left: 4px solid #2196F3;
  }
  
  /* Campo válido y con foco */
  input:focus:valid {
    box-shadow: 0 0 5px green;
  }
  
  /* Campo inválido y con foco */
  input:focus:invalid {
    box-shadow: 0 0 5px red;
  }
</style>

Pseudoclases para longitud de texto

Para campos con restricciones de longitud, podemos usar estas combinaciones:

<style>
  /* Cuando el texto es demasiado corto */
  input[minlength]:invalid:not(:placeholder-shown) {
    border-color: orange;
  }
  
  /* Cuando el texto se acerca al límite máximo */
  input[maxlength]:valid {
    background: linear-gradient(90deg, #e8f5e9 var(--fill-percentage), transparent 0);
  }
</style>

Ejemplo práctico: Formulario de registro con feedback visual

Veamos un ejemplo completo que utiliza pseudoclases para proporcionar retroalimentación visual en un formulario de registro:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Registration Form</title>
  <style>
    /* Estilos base para todos los campos */
    input, select {
      display: block;
      width: 100%;
      padding: 8px;
      margin-bottom: 15px;
      border: 2px solid #ddd;
      border-radius: 4px;
      transition: all 0.3s ease;
    }
    
    /* Indicador para campos requeridos */
    label::after {
      content: "*";
      color: red;
      margin-left: 4px;
    }
    
    /* Estilos para campos válidos (solo después de interacción) */
    input:not(:placeholder-shown):valid {
      border-color: green;
      background-color: #f0fff0;
    }
    
    /* Estilos para campos inválidos (solo después de interacción) */
    input:not(:placeholder-shown):invalid {
      border-color: red;
      background-color: #fff0f0;
    }
    
    /* Estilos para campos con foco */
    input:focus {
      outline: none;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    }
    
    /* Estilos para campos numéricos dentro y fuera de rango */
    input[type="number"]:in-range {
      border-left: 5px solid green;
    }
    
    input[type="number"]:out-of-range {
      border-left: 5px solid red;
    }
  </style>
</head>
<body>
  <form>
    <h2>Create Account</h2>
    
    <div>
      <label for="username">Username</label>
      <input type="text" id="username" name="username" 
             required minlength="4" maxlength="20" 
             pattern="[A-Za-z0-9]+" placeholder=" ">
    </div>
    
    <div>
      <label for="email">Email</label>
      <input type="email" id="email" name="email" 
             required placeholder=" ">
    </div>
    
    <div>
      <label for="age">Age</label>
      <input type="number" id="age" name="age" 
             min="18" max="120" placeholder=" ">
    </div>
    
    <div>
      <label for="password">Password</label>
      <input type="password" id="password" name="password" 
             required minlength="8" placeholder=" ">
    </div>
    
    <button type="submit">Register</button>
  </form>
</body>
</html>

Pseudoclases para estados de interacción

Además de las pseudoclases de validación, podemos combinarlas con pseudoclases de interacción para crear experiencias más refinadas:

:focus - Cuando el elemento tiene el foco
:hover - Cuando el cursor está sobre el elemento
:active - Cuando el elemento está siendo activado (por ejemplo, al hacer clic)

<style>
  /* Estilo base */
  input {
    border: 2px solid #ccc;
    transition: all 0.3s ease;
  }
  
  /* Al pasar el cursor */
  input:hover {
    border-color: #999;
  }
  
  /* Al tener el foco */
  input:focus {
    outline: none;
    border-color: #2196F3;
    box-shadow: 0 0 5px rgba(33, 150, 243, 0.5);
  }
  
  /* Campo válido con foco */
  input:focus:valid {
    border-color: green;
    box-shadow: 0 0 5px rgba(0, 128, 0, 0.5);
  }
  
  /* Campo inválido con foco */
  input:focus:invalid {
    border-color: red;
    box-shadow: 0 0 5px rgba(255, 0, 0, 0.5);
  }
</style>

Indicadores visuales para campos requeridos vs opcionales

Podemos usar las pseudoclases :required y :optional para diferenciar visualmente estos campos:

<style>
  /* Campos requeridos */
  input:required {
    border-left: 4px solid #f44336;
  }
  
  /* Campos opcionales */
  input:optional {
    border-left: 4px solid #9e9e9e;
  }
  
  /* Campos requeridos válidos */
  input:required:valid {
    border-left: 4px solid #4caf50;
  }
</style>

Consideraciones importantes

Las pseudoclases de validación funcionan en tiempo real, lo que significa que los estilos se actualizan inmediatamente cuando cambia el estado de validación.
Para evitar mostrar errores prematuramente, es recomendable combinar estas pseudoclases con otras como :focus, :not(:placeholder-shown) o :not(:focus-within).
No todos los navegadores implementan estas pseudoclases exactamente de la misma manera, por lo que es importante probar en diferentes navegadores.
Estas pseudoclases solo funcionan con elementos que tienen restricciones de validación nativas (como required, pattern, min, max, etc.).
Para una experiencia de usuario óptima, combina estas pseudoclases con mensajes de error claros y descriptivos.
Recuerda que los estilos visuales deben ser accesibles para todos los usuarios, incluyendo aquellos con discapacidades visuales. No dependas únicamente del color para indicar estados de validación.

El uso adecuado de las pseudoclases de validación puede mejorar significativamente la experiencia del usuario al proporcionar retroalimentación inmediata sobre la validez de los datos ingresados, todo sin necesidad de JavaScript adicional.

Aprendizajes de esta lección

Comprender el uso de los atributos nativos required y pattern para validar formularios.
Aplicar restricciones adicionales con min, max, minlength y maxlength en campos de formulario.
Personalizar mensajes de error para mejorar la comunicación con el usuario.
Utilizar pseudoclases CSS para proporcionar retroalimentación visual sobre el estado de validación.
Integrar validaciones y estilos para crear formularios accesibles y amigables sin necesidad de JavaScript.

Completa HTML y certifícate

Únete a nuestra plataforma y accede a miles de tutoriales, ejercicios prácticos, proyectos reales y nuestro asistente de IA personalizado para acelerar tu aprendizaje.

Asistente IA

Resuelve dudas al instante

Ejercicios

Practica con proyectos reales

Certificados

Valida tus conocimientos

Comenzar gratis

Más de 25.000 desarrolladores ya se han certificado con CertiDevs

⭐⭐⭐⭐⭐

4.9/5 valoración

Validaciones en formularios

Validación nativa con atributos required y pattern

Atributo required

Atributo pattern

Expresiones regulares comunes para pattern

Combinando required y pattern

Validación para tipos específicos de input

Ejemplo práctico: Formulario de registro

Consideraciones importantes

¿Te está gustando esta lección?

Restricciones con min, max, minlength, maxlength

Restricciones numéricas: min y max

Ejemplo con selector de rango

Restricciones para fechas

Restricciones de longitud: minlength y maxlength

Comportamiento de minlength y maxlength

Combinando restricciones

Restricciones para campos numéricos con step

Ejemplo práctico: Formulario de reserva

Consideraciones importantes

Mensajes de error personalizados

El atributo title para mensajes personalizados

Mensajes específicos según el tipo de validación

Uso del elemento output para mensajes dinámicos

Mensajes de error con atributos data-*

Mensajes personalizados para diferentes idiomas

Mensajes de error accesibles

Mensajes de error para grupos de campos

Ejemplo práctico: Formulario de contacto con mensajes personalizados

Consideraciones importantes

Estado de validación con pseudoclases

Pseudoclases de validación básicas

Pseudoclases para estados específicos

Control de la retroalimentación visual

Combinando pseudoclases para mayor control

Pseudoclases para longitud de texto

Ejemplo práctico: Formulario de registro con feedback visual

Pseudoclases para estados de interacción

Indicadores visuales para campos requeridos vs opcionales

Consideraciones importantes

Aprendizajes de esta lección

Completa HTML y certifícate

Asistente IA

Ejercicios

Certificados