VALIDACIÓN DE UN FORMULARIO

- Los usuarios se equivocan.
- Los usuarios pueden ser malintencionados.

La validación sirve para prevenir esos errores y evitar ataques malintencionados.


La validación es la comprobación de los datos introducidos por el usuario, si la comprobación obtiene resultado positivo los datos se envían, si es negativo se le indican pautas para corregirlos.

TIPOS DE VALIDACIÓN

- Validación en el front-end (Javascript - Html5)
- Validación back-end
- Doble validación  front-end  y back-end

VALIDACIÓN BÁSICA CON HTML5

- Existen diferentes atributos para la validación en Html5:

+ maxlength  y  minlength (Tamaño admitido de los campos)
+ min , max y step (Para valores numéricos y de fechas)
+ required Campos obligatorios 
+ Disabled o readonly No se pueden modificar(uno no se envía el otro sí)


ESTILOS CSS PARA VALIDACIÓN

:invalid (no pasa)
:valid (pasa)

Ejemplo

input:invalid,
select:invalid,
textarea:invalid {
  /* Estilos para elementos inválidos */
  border: 2px solid red; /* Por ejemplo, un borde rojo para resaltar */
  background-color: #ffcccc; /* Un fondo de color claro */
}

ATRIBUTO PATTERN

Nos permite utilizar expresiones regulares(RegExp) para validar distintos tipos de inputs

El atributo title  nos permite completar el mensaje de error que ve el usuario para indicarle pautas de introducción de datos.

Ejemplos de expresiones  regulares para validar datos con el atributo pattern:

1.Nombre de persona (sin caracteres especiales):

    -Solo letras, puede contener espacios.
    -De al menos 2 caracteres.
    
   pattern="[A-Za-zÁÉÍÓÚáéíóúñÑ\s]{2,}"

2.Apellidos (sin caracteres especiales):

    -Solo letras, puede contener espacios.
    -De al menos 2 caracteres

   pattern="[A-Za-zÁÉÍÓÚáéíóúñÑ\s]{2,}"


3.Edad (números del 1 al 99):

    -Números del 1 al 99.

   pattern="[1-9][0-9]?"

    -De 1 hasta 200 años.
  
  pattern="^(1[0-9]{1,2}|[1-9][0-9]?)$"


4.DNI español (ocho dígitos y una letra al final):

    -Ocho dígitos seguidos de una letra (mayúscula o minúscula).

   pattern="\d{8}[A-Za-z]" 


5.Matrícula española (4 dígitos y 3 letras):

    -Cuatro dígitos seguidos de tres letras (mayúsculas).

    pattern="\d{4}[A-Za-z]{3}"

6.Teléfono español (9 dígitos):

    -Nueve dígitos consecutivos.

    pattern="[0-9]{9}"

7.Una dirección de email
  
    pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}"

8.Un código postal

    pattern="[0-9]{5}"

9.Número entero

   pattern="[0-9]+"   (solo positivos)

   pattern="-?[0-9]+"   (se permiten tambien negativos)

10. Número real

   pattern="-?[0-9]+(\.[0-9]+)?"


11. Contraseña fuerte (Minúscula, mayúscula, número y caracter especial)(minimo 8 caracteres)

 pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*()_+{}\[\]:;<>,.?~\\/-])[A-Za-z\d!@#$%^&*()_+{}\[\]:;<>,.?~\\/-]{8,}$"

12. Un color hexadecimal

 pattern="#[0-9A-Fa-f]{6}"