Los navegadores cuentan con funciones integradas para la validación que verifican que los usuarios hayan ingresado datos en el formato correcto. Puedes activar estas funciones usando los elementos y atributos correctos. Además de eso, puedes mejorar la validación de formularios con CSS y JavaScript.
¿Por qué deberías validar tus formularios?
En el módulo anterior, aprendiste a ayudar a los usuarios a evitar tener que evitar tener que volver a ingresar información en los formularios. ¿Cómo puedes ayudar a los usuarios a ingresar datos válidos?
Es frustrante llenar un formulario sin saber qué campos son obligatorios. o las limitaciones de esos campos. Por ejemplo, ingresas un nombre de usuario y envías un formulario, pero averiguas que los nombres de usuario deben tener al menos ocho caracteres.
Para ayudar a los usuarios con eso, puedes definir reglas de validación y comunicarlas.
Ayuda a los usuarios a no perder por accidente campos obligatorios
Puedes usar HTML para especificar el formato y las restricciones correctos para los datos ingresados en tus formularios. También debes especificar qué campos son obligatorios.
Intenta enviar este formulario sin ingresar ningún dato.
¿Ves un mensaje de error adjunto a <input> en el que se indica que el campo es obligatorio?
Esto sucede debido al atributo required.
<label for="name">Name (required)</label>
<input required type="text" id="name" name="name">
Ya aprendiste que puedes usar muchos más tipos, por ejemplo, type="email".
Veamos un correo electrónico obligatorio, <input>.
Intenta enviar este formulario sin ingresar ningún dato. ¿Hay alguna diferencia con respecto a la demostración anterior? Ahora ingresa tu nombre en el campo de correo electrónico y trata de enviarlo. Ves otro mensaje de error. ¿Cómo puede ser posible? Recibes un mensaje diferente porque el valor que ingresaste no es una dirección de correo electrónico válida.
El atributo required le indica al navegador que el campo es obligatorio.
El navegador también prueba si los datos ingresados coinciden con el formato de type.
El campo de correo electrónico que se muestra en el ejemplo solo es válido si no está vacío y si los datos ingresados son una dirección de correo electrónico válida.
Ayudar al usuario a ingresar el formato correcto
Aprendiste a hacer que un campo sea obligatorio. ¿Cómo le indicarías al navegador que un usuario debe ingresar al menos ocho caracteres para un campo de formulario?
Prueba la demostración. Después del cambio, no podrás enviar el formulario si ingresas menos de ocho caracteres.
<label for="password">Password (required)</label> <input required="" minlength="8" type="password" id="password" name="password">
El nombre del atributo es minlength.
Establece el valor en 8 y obtendrás la regla de validación deseada.
Si quieres lo contrario, usa maxlength.
Comunica tus reglas de validación
<label for="password">Password (required)</label>
<input required minlength="8" type="password" id="password"
name="password" aria-describedby="password-minlength">
<div id="password-minlength">Enter at least eight characters</div>
Asegúrate de que todos los usuarios comprendan tus reglas de validación.
Para ello, conecta el control de formulario con un elemento que explique las reglas.
Para ello, agrega un atributo aria-describedby al elemento con el id del formulario.
Atributo de patrón
A veces, quieres definir reglas de validación más avanzadas.
Nuevamente, puedes usar un atributo HTML.
Se llama pattern y puedes definir un
expresión regular como valor.
<label for="animal">What is your favorite animal? (required)</label>
<input required pattern="[a-z]{2,20}" type="text" id="animal" name="animal">
Aquí, solo se permiten letras minúsculas; el usuario deberá ingresar al menos dos caracteres y no más de veinte.
¿Cómo cambiarías la pattern para que también permita letras mayúsculas?
Pruébalo.
La respuesta correcta es pattern="[a-zA-Z]{2,20}".
Cómo agregar estilos
Ya aprendiste a agregar validación en HTML. ¿No sería genial si también pudieras diseñar los controles del formulario en función del estado de validación? Esto es posible con CSS.
Cómo diseñar un campo obligatorio de formulario
Muéstrale al usuario que un campo es obligatorio antes de que interactúe con el formulario.
Puedes definir el diseño de los campos required con la seudoclase :required de CSS.
input:required {
border: 2px solid;
}
Cómo aplicar diseño a los controles de formulario no válidos
¿Recuerdas qué sucede si los datos ingresados por el usuario no son válidos? Aparecerá el mensaje de error adjunto al control de formulario. ¿No sería genial adaptar la apariencia del elemento cuando esto sucede?
Puedes usar la pseudoclase :invalid.
para agregar estilos a controles de formulario no válidos.
Además, también existe la pseudoclase :valid para definir elementos de formulario válidos.
Hay más formas de adaptar tus estilos en función de la validación. En el módulo sobre CSS, obtendrás más información sobre el estilo de los formularios.
Validación con JavaScript
Para mejorar aún más la validación de sus formularios, puede utilizar la API de JavaScript Constraint Validation.
Proporciona mensajes de error significativos
Ya aprendiste que los mensajes de error no son idénticos en todos los navegadores. ¿Cómo puedes mostrar el mismo mensaje a todos?
Para lograrlo, usa el
setCustomValidity()
de la API de Constraint Validation.
Veamos cómo funciona este proceso.
const nameInput = document.querySelector('[name="name"]');
nameInput.addEventListener('invalid', () => {
nameInput.setCustomValidity('Please enter your name.');
});
Consulta el elemento en el que deseas establecer el mensaje de error personalizado.
Escucha el evento invalid de tu elemento definido.
Allí, configuras el mensaje con setCustomValidity().
En este ejemplo, se muestra el mensaje Please enter your name. si la entrada no es válida.
Abre la demostración en distintos navegadores. deberías ver el mismo mensaje en todas partes. Ahora, quita el código JavaScript y vuelve a intentarlo. Vuelve a ver los mensajes de error predeterminados.
Puedes realizar muchas más acciones con la API de Constraint Validation. Encontrarás una descripción detallada del uso de de validación con JavaScript en otro módulo.
Cómo realizar la validación en tiempo real
Puedes agregar validación en tiempo real en JavaScript si escuchas el evento onblur de un control de formulario.
y validar la entrada de inmediato cuando un usuario abandona un campo del formulario.
Haz clic en el campo del formulario en la demostración.
ingresar "web" y haré clic en otro lugar de la página.
Verás el mensaje de error nativo de minlength debajo del campo del formulario.
Más información para implementar validación en tiempo real con JavaScript en un próximo módulo.
Verifica tus conocimientos
Pon a prueba tus conocimientos sobre la validación de formularios
¿Qué atributo se usa para que los controles de formularios sean obligatorios?
requiredneededessentialobligatory¿Es posible definir tus propios mensajes de error?
message.:invalid.Se pueden enviar un <input> con type="email" y el atributo required: