VALIDANDO ANDO Y NO ME VOY QUEJANDO (PARTE 1. JAVASCRIPT)

<script src=”my own” title=”parte 1 validacion nativa”>

La validación de campos de formulario, es un dolor de cabeza típico en un desarrollo web (y en Javascript 😦 ). ¿Que tanto debe validarse o “restringirse” los datos que deben ser ingresados para “asegurar” una entrada limpia de datos? Aparte del sentido común, existen diferentes criterios que dependerán de la velocidad de la carga de la página, extensión de los campos del formulario, tipos de datos correspondientes en base de datos, seguridad de la aplicación, y un sinnúmero de etcéteras…

Un formulario típico de una página de internet, es un formulario de registro como el que sigue (CSS más, CSS menos):

formulario de registro ejemploTípicas condiciones de ingreso de los datos:

  • Todos los campos son requeridos, es decir, no debe haber campos vacíos o sin seleccionar.
  • Los campos “Nombre” y “Apellido” sólo deben aceptar letras y espacios en blanco (pues yo aún no he visto a nadie llamarse “Juan12”).
  • El campo “Dirección” debe aceptar letras, números y espacios.
  • El campo “Email” debe ser un email válido.
  • El campo “Edad” sólo debe aceptar números (dolor de cabeza número 1!!).
  • En el campo “Sexo” debe seleccionarse un ítem. (dolor de cabeza número 2!).
  • En el campo “Actividades” debe haber seleccionada al menos una opción (dolor de cabeza número 3!).
  • El botón “Confirmar” no debe dejar pasar datos a la aplicación si algunas de las condiciones anteriores no se cumple.

Adicionalmente, ningún campo debe aceptar caracteres especiales (como los corchetes angulares “><” por seguridad). En este ejemplo, es “sencillo” saber las condiciones de ingreso de los datos, sin embargo existen cosas “monstruosas” y “enfermizas”.

Formularios como estos dan asco...Lamentablemente, hay mucha gente que no conoce que es DRY o KISS, y luego inician los problemas para ellos en etapas posteriores del desarrollo.

Para que exista una validación efectiva, en principio debería estar del lado del cliente, acompañada (si la arquitectura del sistema lo permite) de una sanitización (llámenlo paranoia, si lo desean) de los datos en los campos del formulario. En este post, intento utilizar los recursos nativos de Javascript y un poco de lógica de programación para validar este formulario del lado del cliente.

La API forms de Javascript

La API forms de Javascript indexa todos los formularios dentro de un documento HTML, en el orden en el que fueron codificados. Así, si existen dos o más formularios, el primero puede ser llamado por la sentencia document.forms[0], y así para el resto. Una vez ubicado el formulario a ser validado, pues se acceden a los atributos del campo para realizar las respectivas validaciones, he aquí algunos de los más usados:

  • El atributo name para identificar el nombre del campo dentro del objeto document.forms[0].
  • El atributo id para identificar un campo de forma única, y acceder a él via consultas de selectores (usando el método querySelector(), por ejemplo).
  • El atributo value para identificar el valor que posee un elemento en el momento en que éste es instanciado.

Existen además ciertos atributos que permiten conocer el estado general de un elemento (si está seleccionado, si está vacío, si tiene el cursor encima o si tiene el foco de atención). Volviendo al ejemplo anterior, se podría mandar el formulario entero: <form action="POST" name="datosPersonales" id="formulario" onsubmit="validarFormulario(this)">, referenciar el elemento por su nombre directamente: document.datosPersonales, obtenerlo mediante el identificador único: document.getElementById("formulario") o realizar una consulta mediante selectores: document.querySelector("#formulario").

</script>

Anuncios