Validación de Formularios en el Lado del Cliente
Antes de enviar datos al servidor, es importante asegurarse de que se completan todos los controles de formulario requeridos, y en el formato correcto. Esto se denomina validación de formulario en el lado del cliente y ayuda a garantizar que los datos que se envían coinciden con los requisitos establecidos en los diversos controles de formulario.
¿Qué es la validación de formularios?
Proporcionar retroalimentación
La validación de formularios proporciona mensajes como "Este campo es obligatorio" o "Introduzca una dirección de correo electrónico válida" cuando los datos no cumplen con los requisitos establecidos.
Verificar formato
Cuando introduces los datos, el navegador y/o el servidor web verifican que estén en el formato correcto y dentro de las restricciones establecidas por la aplicación.
Mejorar experiencia
La validación realizada en el navegador se denomina validación en el lado del cliente, mientras que la validación realizada en el servidor se denomina validación en el lado del servidor.
Razones para validar formularios
Obtener datos correctos
Nuestras aplicaciones no funcionarán correctamente si los datos de nuestros usuarios se almacenan en el formato incorrecto, son incorrectos o se omiten por completo.
Proteger datos de usuarios
Obligar a nuestros usuarios a introducir contraseñas seguras facilita proteger la información de su cuenta.
Protegernos a nosotros mismos
Hay muchas formas en que los usuarios maliciosos puedan usar mal los formularios desprotegidos y dañar la aplicación.
Advertencia de seguridad
No confíes nunca en los datos que se pasan al servidor desde el cliente. Incluso si tu formulario se valida correctamente y evita la introducción de datos con formato incorrecto en el lado del cliente, un usuario malintencionado puede alterar la petición de red.
La validación en el lado del cliente es una verificación inicial y una característica importante para garantizar una buena experiencia de usuario; mediante la detección de datos no válidos en el lado del cliente, el usuario puede corregirlos de inmediato. Si el servidor lo recibe y, a continuación, lo rechaza; se produce un retraso considerable en la comunicación entre el servidor y el cliente que insta al usuario a corregir sus datos.
Sin embargo, ¡la validación en el lado del cliente no debe considerarse una medida de seguridad exhaustiva! Tus aplicaciones siempre deben realizar comprobaciones de seguridad de los datos enviados por el formulario en el lado del servidor, así como también en el lado del cliente, porque la validación en el lado del cliente es demasiado fácil de evitar, por lo que los usuarios malintencionados pueden enviar fácilmente datos incorrectos a tu servidor.
Tipos de validación en el lado del cliente
Validación de formularios incorporada
Utiliza características de validación de formularios HTML5, que hemos visto en muchos lugares a lo largo de este módulo. Esta validación generalmente no requiere mucho JavaScript.
La validación de formularios incorporada tiene un mejor rendimiento que JavaScript, pero no es tan personalizable como la validación con JavaScript.
Validación con JavaScript
Se codifica utilizando JavaScript. Esta validación es completamente personalizable, pero debes crearlo todo (o usar una biblioteca).
Permite un control total sobre la experiencia de usuario, mensajes de error personalizados y comportamientos específicos para diferentes situaciones de validación.
Atributos de validación HTML5
required
Especifica si un campo de formulario debe completarse antes de que se pueda enviar el formulario.
minlength y maxlength
Especifican la longitud mínima y máxima de los datos de texto (cadenas).
min y max
Especifican los valores mínimo y máximo de los tipos de entrada numéricos.
type
Especifica si los datos deben ser un número, una dirección de correo electrónico o algún otro tipo de preajuste específico.
pattern
Especifica una expresión regular que define un patrón que los datos que se introduzcan deben seguir.
Comportamiento de elementos válidos e inválidos
Cuando un elemento es válido
- El elemento coincide con la pseudoclase :valid de CSS, lo que te permite aplicar un estilo específico a los elementos válidos.
- Si el usuario intenta enviar los datos, el navegador envía el formulario siempre que no haya nada más que lo impida (por ejemplo, JavaScript).
Cuando un elemento no es válido
- El elemento coincide con la pseudoclase :invalid de CSS, y a veces con otras pseudoclases de interfaz de usuario (UI) –por ejemplo, :out-of-range– dependiendo del error, que te permite aplicar un estilo específico a elementos no válidos.
- Si el usuario intenta enviar los datos, el navegador bloquea el formulario y muestra un mensaje de error.
Tipos de errores de validación
badInput
El valor introducido no es aceptable para el tipo de entrada.
patternMismatch
El valor no coincide con el patrón especificado.
rangeOverflow
El valor es mayor que el máximo permitido.
rangeUnderflow
El valor es menor que el mínimo permitido.
stepMismatch
El valor no cumple con los incrementos especificados.
tooLong/tooShort
El texto es demasiado largo o corto.
Ejemplo básico de validación HTML5
¿Prefieres un plátano o una cereza?
Enviar
input:invalid {
border: 2px dashed red;
}
input:valid {
border: 2px solid black;
}
Este es un ejemplo sencillo que muestra un formulario básico con una entrada de texto y un botón de envío. El CSS aplica estilos diferentes dependiendo de si la entrada es válida o no.
Uso del atributo required
HTML con atributo required
¿Prefieres un plátano o una cereza? (requerido)
Enviar
CSS para campos requeridos
input:invalid {
border: 2px dashed red;
}
input:invalid:required {
background-image: linear-gradient(to right, pink, lightgreen);
}
input:valid {
border: 2px solid black;
}
La presencia del atributo required en cualquier elemento que admite este atributo significa que el elemento coincide con la pseudoclase :required, tenga o no un valor. Si en el elemento <input> no se ha introducido ningún valor, input coincidirá con la pseudoclase :invalid.
Validación con expresiones regulares
Definir el patrón
Utiliza el atributo pattern para especificar una expresión regular que valide la entrada.
Crear la expresión regular
Las expresiones regulares son patrones que se pueden usar para establecer combinaciones de caracteres en cadenas de texto.
Aplicar al formulario
Añade el atributo pattern al elemento input que deseas validar.
¿Prefieres un plátano o una cereza?
Enviar
Ejemplos de patrones de expresiones regulares
Restricción de longitud en entradas
Uso de minlength y maxlength
Puedes restringir la longitud de los caracteres de todos los campos de texto creados por <input> o <textarea> utilizando los atributos minlength y maxlength.
Comportamiento de validación
Un campo no es válido si tiene un valor y ese valor tiene menos caracteres que el valor de longitud mínima (minlength), o más que el valor de longitud máxima (maxlength).
Experiencia de usuario
Los navegadores a menudo no permiten que el usuario escriba un valor más largo de lo esperado en los campos de texto. Lo que otorga una mejor experiencia de usuario que maxlength es proporcionar comentarios de recuento de caracteres de manera accesible.
Restricción de valores numéricos
Atributos min y max
Los atributos min y max se pueden usar para proporcionar a los campos numéricos (es decir, <input type="number">) un rango de valores válidos.
El campo no será válido si contiene un valor fuera de este rango.
Ejemplo de código
¿Cuántos te gustaría comer?
En este ejemplo, hemos dado al campo number un min de uno y un max de diez. Los números introducidos que queden fuera de este rango se mostrarán como no válidos.
Atributo step para valores numéricos
<input type="number"> (y otros tipos, como range y date) también pueden tomar un atributo step, que especifica en qué incremento aumenta o disminuye el valor cuando se utilizan los controles de entrada (como el botones numéricos arriba y abajo).
1
Valor predeterminado
Si no se especifica un atributo step, el valor predeterminado es 1
0.5
Valores decimales
Permite especificar incrementos fraccionarios
5
Valores mayores
Útil para incrementos más grandes
En el ejemplo anterior no hemos incluido un atributo step, por lo que el valor predeterminado es 1. Esto significa que los valores de coma flotante, como 3.2, también se mostrarán como no válidos.
Ejemplo completo de validación HTML5
¿Tienes carné de conducir?* Sí No
¿Qué edad tienes?
¿Cuál es tu fruta favorita?* Plátano Cereza Manzana Fresa Limón Naranja
Validación con JavaScript
Debes usar JavaScript si quieres controlar la apariencia de los mensajes de error nativos o tratar con navegadores heredados que no admiten la validación de formularios incorporada en HTML.
API de validación de restricciones
La mayoría de los navegadores admiten la API de validación de restricciones, que consta de un conjunto de métodos y propiedades disponibles en las interfaces DOM de elementos de formulario.
Compatibilidad con navegadores
Para navegadores heredados, puedes implementar tu propia validación sin usar la API incorporada.
Experiencia de usuario personalizada
JavaScript permite personalizar completamente la experiencia de validación y los mensajes de error.
Interfaces DOM compatibles con la API de validación
HTMLButtonElement
Representa un elemento <button>
HTMLFieldSetElement
Representa un elemento <fieldset>
HTMLInputElement
Representa un elemento <input>
HTMLOutputElement
Representa un elemento <output>
HTMLSelectElement
Representa un elemento <select>
HTMLTextAreaElement
Representa un elemento <textarea>
Propiedades de la API de validación de restricciones
validationMessage
Devuelve un mensaje localizado que describe las restricciones de validación que el control no satisface (si corresponde). Si el control no es candidato para la validación de restricciones (willValidate es false) o el valor del elemento satisface sus restricciones (es válido), esto devolverá una cadena vacía.
validity
Devuelve un objeto ValidityState que contiene varias propiedades que describen el estado de validez del elemento. Incluye propiedades como patternMismatch, tooLong, tooShort, rangeOverflow, rangeUnderflow, typeMismatch, valid y valueMissing.
willValidate
Devuelve true si el elemento se valida cuando se envía el formulario; false de lo contrario.
Métodos de la API de validación de restricciones
1
checkValidity()
Devuelve true si el valor del elemento no tiene problemas de validación; false en caso contrario. Si el elemento no es válido, este método también activa un evento invalid en el elemento.
2
setCustomValidity(message)
Añade un mensaje de error personalizado al elemento; si configuras un mensaje de error personalizado, el elemento se considera no válido y se muestra el error especificado. Esto te permite utilizar el código JavaScript para establecer un fallo de validación distinto de los ofrecidos por las restricciones estándar de validación de HTML5.
Implementación de mensajes de error personalizados
La personalización de estos mensajes de error es uno de los casos de uso más comunes de la API de validación de restricciones. Los mensajes automatizados tienen dos inconvenientes:
- No hay una forma estándar de cambiar su aspecto con CSS.
- Dependen de la configuración regional del navegador, lo que significa que puedes tener una página en un idioma pero un mensaje de error en otro idioma.
const email = document.getElementById("mail");
email.addEventListener("input", function (event) {
if (email.validity.typeMismatch) {
email.setCustomValidity(
"¡Se esperaba una dirección de correo electrónico!",
);
} else {
email.setCustomValidity("");
}
});
Ejemplo detallado de validación personalizada
HTML con novalidate
Por favor, introduzca una dirección
de correo electrónico:
Enviar
El atributo novalidate desactiva la validación automática del navegador, permitiendo que nuestra secuencia de comandos tome control sobre la validación.
JavaScript para validación
function showError() {
if (email.validity.valueMissing) {
// Si el campo está vacío
emailError.textContent =
"Debe introducir una dirección de correo electrónico.";
} else if (email.validity.typeMismatch) {
// Si el campo no contiene una dirección de correo electrónico
emailError.textContent =
"El valor introducido debe ser una dirección de correo electrónico.";
} else if (email.validity.tooShort) {
// Si los datos son demasiado cortos
emailError.textContent =
"El correo electrónico debe tener al menos ${ email.minLength } caracteres; ha introducido ${ email.value.length }.";
}
// Establece el estilo apropiado
emailError.className = "error activo";
}
Validación sin API incorporada
En algunos casos, como la compatibilidad heredada del navegador o los controles personalizados, no podrás o no querrás usar la API de validación de restricciones. Todavía puedes usar JavaScript para validar tu formulario, pero vas a tener que escribirlo.
¿Qué tipo de validación debería realizar?
Debes determinar cómo validar los datos: operaciones de cadena, conversión de tipos, expresiones regulares, etc. Tú decides.
¿Qué debo hacer si el formulario no se valida?
Esto es claramente un problema de la interfaz de usuario. Tienes que decidir cómo se comportará el formulario. ¿El formulario va a enviar los datos de todos modos? ¿Deberías resaltar los campos que dan error? ¿Deberías mostrar mensajes de error?
¿Cómo puedo ayudar al usuario a corregir datos no válidos?
Para reducir la frustración del usuario, es muy importante proporcionar tanta información útil como sea posible para guiarlo a fin de que corrija sus entradas de datos. Debes ofrecer sugerencias por adelantado para que sepan lo que se espera de ellos, así como mensajes de error claros.
Ejemplo de validación sin API incorporada
// Hay menos formas de elegir un nodo DOM con navegadores antiguos
const form = document.getElementsByTagName("form")[0];
const email = document.getElementById("mail");
// Lo siguiente es un truco para llegar al siguiente nodo de elementos hermanos en el DOM
let error = email;
while ((error = error.nextSibling).nodeType != 1);
// según la especificación HTML5
const emailRegExp =
/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
// Función para manejar eventos en navegadores antiguos
function addEvent(element, event, callback) {
let previousEventCallBack = element["on" + event];
element["on" + event] = function (e) {
const output = callback(e);
if (output === false) return false;
if (typeof previousEventCallBack === "function") {
output = previousEventCallBack(e);
if (output === false) return false;
}
};
}
Este ejemplo muestra cómo implementar validación de formularios en navegadores antiguos que no admiten la API de validación de restricciones.
Resumen y buenas prácticas
Validación efectiva
Combina validación cliente y servidor
Mensajes claros
Proporciona retroalimentación específica
Seguridad
Nunca confíes solo en validación cliente
La validación de formularios en el lado del cliente a veces requiere JavaScript si deseas personalizar el estilo y los mensajes de error, pero siempre requiere que pienses cuidadosamente en el usuario. Recuerda que siempre debes ayudar a tus usuarios a corregir los datos que proporcionan. Para ese fin, asegúrate de:
- Mostrar mensajes de error explícitos.
- Ser permisivo con el formato de entrada.
- Señalar exactamente dónde se produce el error, especialmente en formularios extensos.
Una vez que hayas verificado que el formulario se ha completado correctamente, puedes proceder a enviarlo.
funciones-en-javascript-4a5nic2.gamma.site
Funciones en JavaScript
Hay un momento, en todo desarrollo, que acabas reutilizando el mismo código una y otra vez. Puede ser que esté formado por un par de líneas o cientos de ellas. A nivel de organización es más práctico crear un grupo capaz de ser invocado que ir copiando y pegando en diferentes sitios. Además que para
eventos-en-javascript-bd42iyz.gamma.site
Eventos en JavaScript
Cualquier actividad producida por un usuario se denomina Eventos: pulsar una tecla, mover el ratón, hacer scroll, pulsar un botón… Y todos los eventos pueden ser escuchados para lanzar acciones. En otras palabras, podemos detectar y vincular cada evento a una funcionalidad de JavaScript. ¡Incluso ex
guia-pruebas-usabilidad-9w1v30d.gamma.site
Guía sobre pruebas de usabilidad de sitios web
Un diseño web atractivo y una experiencia de usuario agradable son elementos vitales para el éxito de un sitio web. Descubre cómo evaluar y mejorar la usabilidad de tu página web para aumentar la credibilidad y la tasa de conversión.
¿Dudas o algo que quieras comentarme?
Estoy aquí para ayudarte a seguir mejorando y aprendiendo.
Si necesitas que te ayude con tu proyecto o clases más específicas escríbeme