Los navegadores tienen funciones integradas para la validación con el fin de comprobar que los usuarios hayan ingresado los datos en el formato correcto. Puedes activar estas funciones con los elementos y atributos correctos. Además, puedes mejorar la validación de formularios con CSS y JavaScript.
¿Por qué deberías validar tus formularios?
En el módulo anterior, aprendiste cómo ayudar a los usuarios a evitar tener que volver a ingresar información de forma reiterada 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 ni cuáles son sus restricciones. Por ejemplo, puedes ingresar un nombre de usuario y enviar un formulario solo para descubrir que los nombres de usuario deben tener al menos ocho caracteres.
Puedes ayudar a los usuarios con eso definiendo reglas de validación y comunicándoles.
Ayuda a los usuarios a evitar que falten campos obligatorios accidentalmente
Puedes usar HTML para especificar el formato correcto y las restricciones para los datos que ingreses 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 al <input> que te 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 la demostración anterior? Ahora ingresa tu nombre en el campo de correo electrónico y trata de enviarlo. Si ves un mensaje de error diferente. ¿Cómo puede ser posible? Recibiste un mensaje diferente porque el valor que ingresaste no es una dirección de correo electrónico válida.
El atributo required indica al navegador que el campo es obligatorio.
El navegador también comprueba 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 corresponden a 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 indicas al navegador que un usuario debe ingresar al menos ocho caracteres para un campo del formulario?
Prueba la demostración. Después de realizar el 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 deseas hacer 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 las 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 del patrón
En algunos casos, es posible que desees definir reglas de validación más avanzadas.
Recuerda, puedes usar un atributo HTML.
Se llama pattern, y puedes definir una 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 debe ingresar al menos dos caracteres y no más de veinte.
¿Cómo cambiarías 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
Ahora aprendiste a agregar validación en HTML. ¿No sería genial si también pudiera diseñar los controles de los formularios en función del estado de validación? Esto es posible con CSS.
Cómo aplicar diseño a un campo de formulario obligatorio
Muéstrale al usuario que un campo es obligatorio antes de interactuar con el formulario.
Puedes definir el estilo de los campos required con la seudoclase de CSS :required.
input:required {
border: 2px solid;
}
Aplicar diseño a controles de formularios no válidos
¿Recuerdas qué sucede si los datos que ingresó 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 suceda?
Puedes usar la seudoclase :invalid para agregar estilos a controles de formulario no válidos.
Además, también existe la seudoclase :valid para aplicar estilo a elementos de formulario válidos.
Hay más formas de adaptar tus estilos según 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 tus formularios, puedes usar la API de validación de restricciones de JavaScript.
Proporciona mensajes de error significativos
Aprendiste antes 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 método setCustomValidity() de la API de validación de restricciones.
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 quieres establecer el mensaje de error personalizado.
Escucha el evento invalid del 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 diferentes navegadores. Deberías ver el mismo mensaje en todas partes. Ahora, intenta quitar el código JavaScript y vuelve a intentarlo. Volverás a ver los mensajes de error predeterminados.
Puedes hacer mucho más con la API de validación de restricciones. Más adelante, encontrarás una explicación detallada del uso de validación con JavaScript.
Cómo validar en tiempo real
Puedes agregar validación en tiempo real en JavaScript. Para ello, escucha el evento onblur de un control de formulario
y valida la entrada inmediatamente cuando un usuario salga de un campo del formulario.
Haz clic en el campo del formulario en demo, ingresa "web" y haz clic en otro lugar de la página.
Verás el mensaje de error nativo de minlength debajo del campo del formulario.
Obtén más información sobre la implementación de la validación en tiempo real con JavaScript en un próximo módulo.
Verifica tus conocimientos
Pon a prueba tus conocimientos sobre 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 puede enviar un <input> con type="email" y el atributo required: