Validación de Formularios

Validación de Formularios en el Lado del Cliente

• La validación de formularios en el lado del cliente asegura que los datos introducidos cumplen con los requisitos establecidos antes de enviarlos al servidor.
• Proporciona retroalimentación inmediata al usuario, como mensajes de error si los datos no son válidos.
• Verifica que los datos estén en el formato correcto y dentro de las restricciones definidas.
• La validación en el navegador es en el lado del cliente; en el servidor, se llama validación en el lado del servidor.

Razones para Validar Formularios

• Asegura que las aplicaciones funcionen correctamente al almacenar datos en el formato correcto.
• Protege la información de la cuenta de los usuarios, obligándolos a introducir contraseñas seguras.
• Protege la aplicación contra usos malintencionados de formularios desprotegidos.

Advertencia de Seguridad

• No se debe confiar únicamente en la validación en el lado del cliente como medida de seguridad exhaustiva.
• Siempre se deben realizar comprobaciones de seguridad en el lado del servidor, ya que la validación del lado del cliente es fácil de evitar.

Tipos de Validación en el Lado del Cliente

• Validación de formularios incorporada: Utiliza las características de validación de HTML5, generalmente sin mucho JavaScript.
• Validación con JavaScript: Permite una personalización completa, pero requiere escribir todo el código o usar una biblioteca.

Atributos de Validación HTML5

• required: Indica que un campo debe completarse antes de enviar el formulario.
• minlength y maxlength: Especifican la longitud mínima y máxima de los datos de texto.
• min y max: Definen los valores mínimo y máximo para tipos de entrada numéricos.
• type: Define el tipo de datos esperado (número, correo electrónico, etc.).
• pattern: Especifica una expresión regular que los datos deben seguir.

Comportamiento de Elementos Válidos e Inválidos

• Elemento válido: Coincide con la pseudoclase :valid de CSS y permite el envío del formulario.
• Elemento no válido: Coincide con la pseudoclase :invalid de CSS, bloquea el envío 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.

Uso del Atributo required

• La presencia del atributo required hace que el elemento coincida con la pseudoclase :required.
• Si no se introduce un valor, el elemento también coincidirá con la pseudoclase :invalid.

Validación con Expresiones Regulares

• Permite especificar patrones que deben seguir los datos introducidos.
• Se utiliza el atributo pattern en el elemento input.
• Ejemplos de patrones:
  • a: coincide con el carácter "a".
  • abc: coincide con "a" seguido de "b" seguido de "c".
  • ab?c: coincide con "a" seguido opcionalmente de "b" seguido de "c" ("ac" o "abc").
  • ab*c: coincide con "a" seguido de cero o más "b" seguidas de "c" ("ac", "abc", "abbbbbc", etc.).
  • a|b: coincide con "a" o "b".
  • abc|xyz: coincide con "abc" o "xyz".

Restricción de Longitud en Entradas

• Se utilizan los atributos minlength y maxlength en campos <input> o <textarea>.
• Un campo no es válido si su valor tiene menos caracteres que minlength o más que maxlength.
• Los navegadores a menudo impiden que se escriban más caracteres de los permitidos, mejorando la experiencia de usuario.

Restricción de Valores Numéricos

• Los atributos min y max definen un rango de valores válidos para campos numéricos (<input type="number">).
• El atributo step especifica el incremento para los valores numéricos al usar los controles de entrada.
• Si no se especifica step, el valor predeterminado es 1.

Validación con JavaScript

• Es necesaria para controlar la apariencia de los mensajes de error y para navegadores que no soportan la validación de formularios incorporada en HTML.
• Permite una experiencia de usuario y mensajes de error totalmente personalizados.

API de Validación de Restricciones

• Es un conjunto de métodos y propiedades disponibles en las interfaces DOM de elementos de formulario que la mayoría de los navegadores modernos soportan.

Propiedades de la API de Validación de Restricciones

• validationMessage: Devuelve un mensaje (localizado) que describe la restricción de validación que el control no satisface.
• validity: Devuelve un objeto ValidityState con propiedades que describen el estado de validez del elemento (como patternMismatch, tooLong, valid y valueMissing).
• willValidate: Devuelve true si el elemento se validará al enviar el formulario; false en caso contrario.

Métodos de la API de Validación de Restricciones

• checkValidity(): Devuelve true si el valor del elemento no tiene problemas de validación; false en caso contrario. Activa un evento invalid si el elemento es inválido.
• setCustomValidity(message): Añade un mensaje de error personalizado al elemento, marcándolo como no válido.

Implementación de Mensajes de Error Personalizados

• Permite personalizar los mensajes de error, ya que los mensajes automatizados no se pueden modificar fácilmente con CSS y dependen de la configuración regional del navegador.

Validación sin API Incorporada

• Útil para compatibilidad con navegadores antiguos o controles personalizados.
• Requiere escribir tu propio código de validación en JavaScript.
• Implica determinar cómo validar los datos (operaciones de cadena, conversión de tipos, expresiones regulares, etc.) y cómo manejar el caso de un formulario no válido (resaltar campos, mostrar mensajes de error).

Recomendaciones Generales

• Combinar validación en el lado del cliente y en el lado del servidor.
• Proporcionar mensajes de error claros y específicos.
• Nunca confiar solo en la validación en el lado del cliente por razones de seguridad.
• Usar el atributo novalidate para desactivar la validación automatica.
• Recordar siempre ayudar a los usuarios a corregir los datos que proporcionan.
• Mostrar mensajes de error explícitos.
• Ser permisivos con el formato de entrada.
• Indicar con precisión dónde se produce el error, especialmente en formularios largos.