Todos en algún momento nos hemos topado con un formulario, ya sea en algún sitio web o incluso en aplicaciones de computadora o de móviles. Estos formularios nos ayudan a recolectar información que nos sirve para realizar actividades importantes como registro de usuarios, configuraciones específicas, entre otros trabajos. Tristemente, aunque por más claro que se ponga un formulario siempre habrá problemas con los datos ingresados, ya sea que la información de un campo no deba llevar números, que otro campo deba llevar un tipo de dato en cierto formato específico o que un campo simplemente no debe dejarse vacío.
Cuando hablamos de validación de formularios nos referimos a que comprobaremos que el formulario a llenar deba cumplir con ciertos requisitos antes de ser aceptado y guardar los datos recibidos. En nuestro caso, la validación de formularios para sitios web es algo que se debe considerar desde el lado del cliente, y no del servidor.
Con la validación obtendremos una mejor eficiencia a la hora de llenar formularios, pues prevenimos que se envíen formularios erróneos al servidor y que el cliente tenga que esperar la respuesta que termina siendo errónea. Se prefiere utilizar scripts para revisar los campos del formulario y entonces prevenir que el usuario envíe información errónea, pero sin tener que esperar la respuesta del servidor, así hacemos que el usuario llene el formulario correctamente y el servidor simplemente guarde la información sin revisar si es correcta.
Existen múltiples lenguajes script para utilizar en sitios web, pero usaremos JavaScript en este caso por ser el lenguaje script más común.
Entendiendo las validaciones
A la hora de escribir las validaciones hay que entender los tipos de datos que manejamos por cada control. Mostraré las validaciones básicas para los controles comunes de los formularios, como cajas de texto, lista de opciones, checkbox, radiobutton e incluso el selector de fechas (elemento de HTML5).
Trabajaremos con el código que se muestra a continuación. Se explicarán con más detalle las partes del script, omitiendo algunos detalles de HTML.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 |
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>Prueba de validación con JS</title> <script> function validarFormulario(){ var txtNombre = document.getElementById('nombre').value; var txtEdad = document.getElementById('edad').value; var txtCorreo = document.getElementById('correo').value; var txtFecha = document.getElementById('fecha').value; var cmbSelector = document.getElementById('selector').selectedIndex; var chkEstado = document.getElementById('checkBox'); var rbtEstado = document.getElementsByName('radioButton'); var banderaRBTN = false; //Test campo obligatorio if(txtNombre == null || txtNombre.length == 0 || /^\s+$/.test(txtNombre)){ alert('ERROR: El campo nombre no debe ir vacío o lleno de solamente espacios en blanco'); return false; } //Test edad if(txtEdad == null || txtEdad.length == 0 || isNaN(txtEdad)){ alert('ERROR: Debe ingresar una edad'); return false; } //Test correo if(!(/\S+@\S+\.\S+/.test(txtCorreo))){ alert('ERROR: Debe escribir un correo válido'); return false; } //Test fecha if(!isNaN(txtFecha)){ alert('ERROR: Debe elegir una fecha'); return false; } //Test comboBox if(cmbSelector == null || cmbSelector == 0){ alert('ERROR: Debe seleccionar una opcion del combo box'); return false; } //Test checkBox if(!chkEstado.checked){ alert('ERROR: Debe seleccionar el checkbox'); return false; } //Test RadioButtons for(var i = 0; i < rbtEstado.length; i++){ if(rbtEstado[i].checked){ banderaRBTN = true; break; } } if(!banderaRBTN){ alert('ERROR: Debe elegir una opción de radio button'); return false; } return true; } </script> </head> <body> <form action="" onsubmit="return validarFormulario()"> <label for="nombre"> <span>Nombre:</span> </label> <input id="nombre" name="nombre" type="text"> <br><br> <label for="edad"> <span>Edad:</span> </label> <input id="edad" name="edad" type="text"> <br><br> <label for="correo"> <span>Correo electrónico:</span> </label> <input id="correo" name="correo" type="text"> <br><br> <label for="fecha"> <span>Fecha:</span> </label> <input id="fecha" name="fecha" type="date"> <br><br> <label for="selector"> <span>Selecciona una opción:</span> </label> <select id="selector" name="selector"> <option value="">Valor por defecto</option> <option value="1">Un oso</option> <option value="2">Dos lobos</option> <option value="3">Tres dragones</option> </select> <br><br> <label for="checkBox"> <span>Un checkbox:</span> </label> <input id="checkBox" name="checkBox" type="checkbox"> Haz clic en mí <br><br> <label for="radioButton"> <span>Selecciona una opción:</span> </label><br> <input type="radio" id="radioButton" name="radioButton"> Un botón<br> <input type="radio" id="radioButton" name="radioButton"> Otro botón<br> <input type="radio" id="radioButton" name="radioButton"> Mas botones <br><br> <input type="submit" value="Submit"> </form> </body> </html> |
Aquí puedes descargar el código fuente: <<Archivo HTML>>
Aquí puedes ver el archivo en ejecución: <<Visualizar ejemplo en funcionamiento>>
Validación de campos obligatorios
Los campos obligatorios son partes fundamentales de los formularios, pues sin ellos no tendrían sentido los formularios. Cuando evaluamos los campos debemos asegurarnos de tres puntos escenciales:
-
Que no contenga un valor nulo
-
Que el campo no se encuentre vacío
-
Que no esté relleno solamente con espacios en blanco
Observemos el código de ejemplo que se encarga de evaluar estos tres puntos importantes:
|
1 2 3 4 5 |
//Test campo obligatorio if(txtNombre == null || txtNombre.length == 0 || /^\s+$/.test(txtNombre)){ alert('ERROR: El campo nombre no debe ir vacío o lleno de solamente espacios en blanco'); return false; } |
Un valor nulo quiere decir que el campo no tenga absolutamente nada, es decir, que ni siquiera exista el elemento que buscamos o que vamos a examinar. Por preferencia se pone primero esta evaluación para prevenir errores al tratar de acceder un valor no existente. La comparación se realiza con la palabra reservada “null”.
Para averiguar si un campo se encuentra vacío simplemente debemos saber la longitud del valor que obtuvimos del control (esto solo se aplica a controles que contengan texto) y compararlo. Si la longitud del valor del campo es igual a cero, entonces no hay nada escrito y marcamos un error. Se debe utilizar la propiedad length de nuestra variable, pues este nos devuelve la cantidad de caracteres que tiene nuestro dato.
No falta el tipo listo que cree que puede llenar un campo de texto solamente con espacios en blanco. Si, son caracteres y la longitud no es igual a cero, pero no necesitamos espacios en blanco, sino información específica y válida de lo que requiera nuestro formulario, entonces debemos hacer uso de una expresión regular. Las expresiones regulares son patrones que se utilizan para indicar si una cadena de caracteres contiene un patrón específico. Esto sirve mucho para facilitar la filtración de errores a la hora de leer datos complejos y que llevan múltiples condiciones. Aquí se usa la expresión regular ^\s+$, el cuál se lee como “Todas las cadenas que comiencen con espacio, contenga uno o más caracteres espacio y terminen con espacio”. El símbolo ^ indica que una cadena debe comenzar con un cierto símbolo y el símbolo $ indica que debe terminar con otro cierto símbolo. El símbolo ‘\s’ sin las comillas es el equivalente al espacio en blanco. El símbolo + indica que el símbolo a su izquierda debe ir dentro de la cadena una o más veces. Las expresiones regulares pueden ser complejos o simples como este, pero todo depende de lo que deseas evaluar. Entonces, utilizando la propiedad test de las expresiones regulares podemos evaluar nuestra cadena y verificar si solo contiene espacios. Si la propiedad test nos devuelve verdadero, entonces el campo tiene valores incorrectos, sino, significa que el usuario ingresó un dato no vacío.
Validación de campos numéricos
Los campos numéricos son más detallistas a la hora de recibir información, pues debemos asegurarnos que solo se ingresen números, y nada mas. Por fortuna tenemos a nuestra disposición la función isNaN de JavaScript.
|
1 2 3 4 5 |
//Test edad if(txtEdad == null || txtEdad.length == 0 || isNaN(txtEdad)){ alert('ERROR: Debe ingresar una edad'); return false; } |
La función isNaN recibe como parámetro el dato a evaluar y, si no es un número válido, entonces devuelve verdadero. Hay que considerar que esta función también toma como válido los signos y los puntos decimales.
También podemos utilizar esta función para validar fechas que usen el campo date de HTML5:
|
1 2 3 4 5 |
//Test fecha if(!isNaN(txtFecha)){ alert('ERROR: Debe elegir una fecha'); return false; } |
Para las fechas debemos invertir la condición, pues isNaN nos devuelve falso si el número está en un formato básico como 12, -3.12, etc. Y nos devuelve verdadero si está en un formato distinto y que mezcle caracteres como diagonales o guiones.
Validación de campos de correo electrónico
Nunca hace falta un formulario que solicite un correo electrónico, o incluso más de uno, por lo que validarlos es una tarea común. Basta con que utilicemos una expresión regular para identificar su correcta escritura. Veamos el siguiente fragmento de código que hice para validar correos electrónicos:
|
1 2 3 4 5 |
//Test correo if(!(/\S+@\S+\.\S+/.test(txtCorreo))){ alert('ERROR: Debe escribir un correo válido'); return false; } |
Como podrás observar, la expresión regular utilizada es muy sencilla, pues solamente evalúa que la cadena contenga uno o más caracteres que no sean espacios en blanco, seguido del símbolo “@” que va junto a uno o más caracteres que no sean espacios en blanco, luego un punto y termina con uno o más caracteres que no sean espacios en blanco.
En la práctica, esta expresión regular es demasiado simple y no serviría para autenticar una verdadera dirección de correo. Las expresiones regulares utilizadas para validar correos electrónicos pueden llegar a ser muy complejas, pero todo depende de quien lo programe, o claro, puedes buscar dichas expresiones en Internet, aunque hay que asegurarse que funcionen correctamente.
Validación de campos selectores (Combo Box)
La validación para selectores de opciones resulta ser sencillo. Hay que tener en mente que esta herramienta maneja una lista de opciones, los cuales manejan un índice para cada elemento, por lo que siempre se verifica que la opción seleccionada no sea la primera opción, es decir, la opción con índice cero. Veamos el código:
|
1 2 3 4 5 |
//Test comboBox if(cmbSelector == null || cmbSelector == 0){ alert('ERROR: Debe seleccionar una opcion del combo box'); return false; } |
Por razones de que el selector no esté inicializado, se coloca la condición de que el valor obtenido del selector no sea nulo. Una buena práctica del uso del selector es siempre colocar la primera opción como un valor que nos sirva para identificar que no es válido. Podría incluirse un nombre como “-selecciona un valor-” o “Haz clic aquí” para que el usuario sepa que no puede dejar este campo sin contestar.
Validación de campos Check Box
Los check box son controles que permiten tener un valor booleano, es decir, pueden estar seleccionado (verdadero) o no seleccionado (falso).
La validación en realidad es muy intuitiva en esta parte, por lo que simplemente debemos validar que su estado sea que NO se encuentre seleccionado.
|
1 2 3 4 5 |
//Test checkBox if(!chkEstado.checked){ alert('ERROR: Debe seleccionar el checkbox'); return false; } |
Para la validación de este control debemos obtener todo el control y no solo el valor y utilizamos la propiedad checked, que es el estado del control. Si el estado del control nos dice que es falso, entonces, gracias al operador de negación (el operador “!”) entraremos a la condición y marcaremos error.
Validación de campos Radio Button
Los Check Box son campos que pueden seleccionarse uno o más de ellos, pero los Radio Buttons permiten seleccionar solamente uno de ellos. Esto nos dice que entonces debemos validar que se mantenga seleccionado una de las opciones. Lo podremos comprobar de la siguiente forma:
|
1 2 3 4 5 6 7 8 9 10 11 |
//Test RadioButtons for(var i = 0; i < rbtEstado.length; i++){ if(rbtEstado[i].checked){ banderaRBTN = true; break; } } if(!banderaRBTN){ alert('ERROR: Debe elegir una opción de radio button'); return false; } |
Aquí debemos extraer todos los elementos Radio Button que utilicen el nombre “radioButton”, los cuales se almacenarán dentro de nuestra variable como un arreglo de Radio Buttons. Con esto, simplemente utilizaremos un iterador “FOR” para obtener los estados de cada botón. Si uno de esos botones contiene su valor checked en verdadero, entonces marcamos una bandera para decir que lo encontramos (En este caso nuestra bandera es banderaRBTN) y entonces rompemos el bucle, pues no tiene caso perder el tiempo revisando los demás botones de la sección.
Si los botones se mantienen sin seleccionar, entonces la bandera no cambiará y tendremos que indicarle al usuario que le faltó seleccionar una opción.
Conclusión
Las validaciones siempre son indispensables para obtener información por medio de formularios, pero no tienen un estándar, sino que cada campo y cada dato debe ser tratado de forma específica, por lo que depende del programador hacer las respectivas validaciones para cada campo.
Recomiendo ampliamente que estudien y entiendan cómo trabajan las expresiones regulares, ya que estos brindan una gran ayuda al leer cadenas y ahorrarnos varias validaciones con manejos de cadenas.
A final de cuentas, las validaciones son estructuradas y elaboradas por parte del programador. Todo depende del orden que haga las validaciones y el cómo ejecutar sus acciones.
—— validar y enviar en jq ——
—— validar y enviar en js ——