VALIDACIÓN DE FORMULARIOS DE DATOS

¿Qué es la validación de formularios?

Diferentes tipos de validación en el lado del cliente
Usar la validación de formulario incorporada
Validar formularios utilizando JavaScript
 VALIDACIÓN DE FORMULARIOS DE DATOS

• La validación en el lado del cliente es una

• OBJETIVO:
Entender qué es la validación de
formularios en el lado del cliente,
porqué es importante y cómo aplicar
• Sus aplicaciones siempre deben realizar
diversas técnicas para
implementarla.
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.
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.
 ¿ QUE ES LA VALIDACIÓN DE FORMULARIOS?
• Cuando introducimos 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.
• 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.
Hay tres razones principales por lo
que es importante validar nuestros
formularios:
1. Queremos obtener los datos
correctos en el formato
correcto.
2. Queremos proteger los datos de
nuestros usuarios.
3. Queremos protegernos a
nosotros mismo.
DIFERENTES TIPOS DE VALIDACIÓN EN EL LADO
DEL CLIENTE

1. La validación de formularios 1. La validación con JavaScript:

incorporada:
Se codifica utilizando JavaScript.
Utiliza características de validación de
formularios HTML5.
Esta validación es completamente
personalizable, pero debe crearlo todo
Esta validación generalmente no (o usar una biblioteca).
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.
 USAR LA VALIDACIÓN DE FORMULARIO
INCORPORADA
Una de las características más
importantes de los controles de
formulario de HTML5 es la capacidad de
validar la mayoría de los datos de
usuario sin depender de JavaScript.
Esto se realiza mediante el uso de
atributos de validación en los elementos
del formulario.
Atributos de validación de formularios:
• 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 pre ajuste
específico.
• pattern: Especifica una expresión
regular que define un patrón que los datos
que se introduzcan deben seguir.
 USAR LA VALIDACIÓN DE FORMULARIO
INCORPORADA
1. Cuando un elemento es válido, se
cumplen los aspectos siguientes:
• El elemento coincide con la
pseudoclase :valid de CSS, lo que le
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).
1. Cuando un elemento no es válido, se
cumplen los aspectos siguientes:
• 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 le 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.
 VALIDACIÓN DE UNA EXPRESIÓN REGULAR
Otra característica útil de validación es
el atributo pattern, que espera
una expresión regular como valor.
Una expresión regular (regex) es un
patrón que se puede usar para establecer
combinaciones de caracteres en cadenas
de texto, por lo que las expresiones
regulares son ideales para la validación
de formularios y sirven para una gran
variedad de otros usos en JavaScript.
 RESTRINGIR LA LONGITUD DE TUS ENTRADAS
Puede restringir la longitud de los
caracteres de todos los campos de texto
creados por <input> o <textarea>
utilizando los atributos minlength y
maxlength.
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).
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 y permitirles editar su
contenido a un tamaño más reducido.
 RESTRINGIR LOS VALORES DE SUS ENTRADAS

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 VALIDACIÓN DE FORMULARIO
INCORPORADA

Práctica de restringir los valores de

entrada, restringir la longitud de las
entradas, uso de expresiones regulares,
uso del atributo required.
.
VALIDAR FORMULARIOS UTILIZANDO JAVASCRIPT

Debe usar JavaScript si quiere controlar

la apariencia de los mensajes de error
nativos o tratar con navegadores
heredados que no admiten la validación
de formularios incorporados en HTML.
 LA API DE VALIDACIÓN DE RESTRICCIONES

Consta de un conjunto de métodos y

propiedades disponibles en las
interfaces DOM de elementos de
formulario siguientes: • HTMLOutputElement (representa un
elemento <output>)
• HTMLSelectElement (representa un
• HTMLButtonElement (representa un elemento <select>)
elemento <button>).
• HTMLTextAreaElement (representa un
• HTMLFieldSetElement (representa elemento <textarea>)
un elemento <fieldset>)
• HTMLInputElement (representa un
elemento <input>)
 LA API DE VALIDACIÓN DE RESTRICCIONES

La API de validación de restricciones • validity: Devuelve un

hace que las propiedades siguientes objeto ValidityState que contiene
estén disponibles en los elementos varias propiedades que describen el
anteriores: estado de validez del elemento.
• validationMessage: Devuelve un
mensaje localizado que describe las
restricciones de validación que el • willValidate: Devuelve true si el
control no satisface (si elemento se valida cuando se envía
corresponde). Si el control no es el formulario; false de lo contrario.
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.
 LA API DE VALIDACIÓN DE RESTRICCIONES

• setCustomValidity(message): Añade
un mensaje de error personalizado
La API de validación de restricciones
al elemento; si configura un mensaje
también pone a disposición los
de error personalizado, el elemento
siguientes métodos en los elementos
se considera no válido y se muestra
anteriores:
el error especificado.
• checkValidity(): Devuelve true si el
Esto le permite utilizar el código
valor del elemento no tiene
JavaScript para establecer un fallo de
problemas de validez; false en caso
validación distinto de los ofrecidos por
contrario. Si el elemento no es
las restricciones estándar de validación
válido, este método también activa
de HTML5. El mensaje se muestra al
un evento invalid en el elemento.
usuario cuando se informa del
problema.
ALTERNATIVAS PARA VALIDAR FORMULARIOS CON
JAVASCRIPT
Debemos acceder campo a campo del
formulario y comprobar que los valores
introducidos tienen la forma que
estamos esperando.
En caso que todos los campos de
formulario estén correctos, entonces se
realiza el envío hacia el servidor donde
se tenga que tratar el formulario.
La diferencia de enfoques que podemos
encontrar en la práctica varía
principalmente en cómo accedemos a
los campos del formulario y hacemos el
envío.
Son estilos de acceso al DOM un poco
diferentes, ya que las costumbres de
codificación, así como el estándar de
Javascript han ido cambiando con el
tiempo.
 VALIDACIÓN CAPTURANDO EL EVENTO SUBMIT DEL
FORMULARIO

En este primer ejemplo vamos a

capturar el evento submit del formulario
con Javascript, ya que el momento de
enviarlo es el adecuado para validar los
datos.
Realizaremos la validación y luego, si ha CODIGO HTML
ido todo bien, lo enviaremos.
VALIDACIÓN CAPTURANDO EL EVENTO SUBMIT DEL
FORMULARIO

JAVASCRIPT
 EJEMPLOS VALIDACIÓN DE FORMULARIOS
JAVASCRIPT
Validar formulario con JavaScript y
expresiones regulares, html y css grid.