educacion

1. Validación de Datos
¿Integridad, Calidad, Seguridad?
Tec. Cesar R. Aguirre Sovero

2. Validación de Datos
Una definición…
Tradicionalmente, la validación de un formulario se ha hecho siempre
en Javascript, sin embargo, HTML5 introduce unos nuevos atributos
para formularios que permiten realizar la validación del formulario
directamente en HTML5, sin necesidad de recurrir a Javascript. El caso
ideal sería aplicar una capa de validación HTML5, y si se desea algo
adicional o más potente, recurrir a Javascript.
En muchos de los campos de entrada de datos de nuestro formulario, se
pueden utilizar ciertos atributos HTML5 para realizar validaciones
básicas. Algunos de estos atributos ya lo hemos visto en apartados
anteriores, sin embargo, vamos a comentarlos uno por uno:

4. • Estos son los atributos principales de validación. Para
entender bien cuando un campo pasa la validación y
cuando no, vamos añadir unos estilos CSS a nuestra
página:
¿Todos deberían
introducir todo
bien, no?
Validación de Datos
• Estos son los atributos principales de validación. Para entender bien
cuando un campo pasa la validación y cuando no, vamos añadir unos
estilos CSS a nuestra página:
aparecerá en verde.

5. Atributos minlength / maxlength
El atributo minlength y el atributo maxlength son atributos para restringir la longitud de texto escriba en
un campo de entrada de texto. Puede utilizarse tanto en elementos <input> de tipo text, search, url, tel,
email, password, como en elementos <textarea>.

6. • Este ejemplo plantea dos validaciones de tamaño en los campos <input>. Si
intentamos escribir más carácteres de los permitidos, comprobaremos que el
navegador bloquea y no deja seguir escribiendo:
• El usuario debe tener entre 5 y 40 carácteres.
• El password debe tener 11 carácteres como mínimo.
Validación de Datos

7. • El atributo min y max (no confundir con los anteriores) sirven para
establecer un valor mínimo o máximo permitido en campos de entrada
<input> de datos numéricos (número o rango) o de fecha (fecha, mes,
semana, hora o fecha-hora):
Los atributos min y max

8. • En este ejemplo planteamos dos campos <input> que tienen validaciones con los atributos min y max:
• La edad debe estar entre 18 y 60. Se puede escribir otro valor, pero no pasará la validación (en rojo).
• Si usamos las flechitas del <input> solo nos permitirá movernos entre el rango permitido.
• La fecha de inicio debe estar entre 01/01/2024 y 01/12/2024. otro valor, no pasará la validación.
• Los valores permitidos son siempre del año 2024, por lo que ese campo se bloqueará (en gris).
• Si usamos el widget del calendario, nos bloquea en gris las opciones no permitidas por validación.
Validación de Datos

9. El atributo step
De la misma forma que en el apartado anterior, el atributo step nos permite realizar
validaciones en los campos numéricos o de fechas. En esta ocasión, el atributo step
trabaja conjuntamente con los atributos min y max y establece el incremento o
decremento que es posible permitir.
Así pues, por ejemplo, si en un valor numérico tenemos un min de 5 y un max de 10...
Validación de Datos
 Con un step a 1 se permitirán los valores 5, 6, 7, 8, 9 y 10.
 Con un step a 2 se permitirán los valores 5, 7, 9.
 Con un step a 3 se permitirán los valores 5 y 8.
 Con un step a 4 se permitirán los valores 5 y 9.
 Con un step a 5 se permitirán los valores 5 y 10.
 Valores step superiores a 5 sólo permitirá el valor inicial, es decir, 5

10. De la misma forma, podemos utilizar el atributo step para fechas:
Validación de Datos
De la misma forma, podemos utilizar el atributo step para fechas:

11. Observa que para los campos de fecha, el valor step representa días,
por lo que si indicamos un step a 2, al pulsar sobre el calendario, observaremos que nos muestra
un calendario con los días pares bloqueados en gris (no pasan la validación).
Validación de Datos

12. El atributo required
Validación de Datos
Por defecto, los campos de entrada de datos de un formulario son opcionales. Por
esa razón, aunque tengamos un campo de datos vacío, nos mostrará el color de
fondo verde.

13. Validación de Datos
Sin embargo, si le añadimos el atributo required, estaremos indicando que ese campo de entrada de
datos es obligatorio, y no de no rellenarse, no cumpliría la validación y por lo tanto el navegador no
dejará enviar el formulario.

14. Práctica
 El atributo disabled
 El atributo readonly
Realizar un resumen y desarrollar una 2 ejemplos de
los siguientes atributos