En publicaciones anteriores hemos aprendido a controlar el envío de un formulario mediante el evento onSubmit.
Hoy veremos como podemos ir informando al usuario que rellena un campo de formulario si este tiene el formato o los datos que esperamos o no.
Realmente existen muchas formas de hacerlo.
El evento javascript onKeyup debería ser suficiente.
Pero nosotros hoy usaremos onKeyup combinado con la estructura de programación try, catch y throw.
Usos de try, catch, finally
La estructura try + throw, catch, finally se usa en programación para lanzar avisos en tiempo de ejecución.
No es exclusiva de javascript.
Por ejemplo es muy usada en Java.
Recordemos que la diferencia entre Java y Javascript es que java se debe necesita un compilador que genere un .exe mientras que javascript se ejecuta línea a línea y se para cuando se detecta un error.
Hay ocasiones en las que toda la sintaxis de un programa es correcta y necesitamos podernos lanzar algún tipo de avisador que nos indique si la información con la que está trabajando el programa es correcta o no.
Por razones obvias try+throw, catch finally es especialmente útil en los lenguajes no son de tipo script.
Aunque nosotros en esta ocasión lo vamos a usar para validar el formulario, realmente sirve para validar cualquier cosa.
Ejemplo de validación de un campo
Es importante remarcar que el objetivo que perseguimos es validar que el usuario escriba un número comprendido entre 18 y 120. Y que este sea un número y no un texto.
En la primera imagen podéis observar un formulario normal y corriente.
Podemos ver un campo label con un for que coincide en contenido con el name del input nombre.
Esto es así para que cuando un usuario haga click en el contenido del label el foco se sitúe en el input.
En segundo lugar observar unos campos span con los identificadores «error» y «errorFormulario» que tienen el objetivo de indicar al usuario los errores de validación.
El campo «errorFormulario» no lo vamos a utilizar.
Fijaros que es el mismo formulario (o muy parecido) de las entradas previas de validación de formularios mediante javascript y jquery respectivamente.[separator_with_icon icon=»fa-smile-o»]En la segunda imagen se observa el código <script>
Mediante addEventListener(«keyup»,validar) asignamos al input de name nombre el evento onKeyup. Este evento sirve para ejecutar validar() cada vez que el usuario levanta la tecla mientras está escribiendo.
La función validar no lleva paréntesis porqué se trata de una asignación y no de la ejecución inmediata de la función cuando se asigna en el código.
La función reset sirve para borrar el campo que se haya escrito en el input si esté no ha sido correctamente validado. Detallamos la imagen más adelante.
A continuación fijaros en los campos try, if() + throw, catch y finally.
La variable err tiene este nombre porqué así la hemos llamado. Podría tener cualquier otro nombre.
err almacena únicamente un valor de error lanzado en el throw.Fijaros también que el if no es un condicional normal como podemos estar habituados. En lugar de escribir if(){} en su lugar estamos escribiendo if() throw «».
Estamos validando todas las opciones posibles. Incluso las correctas.
En el catch(err) se declara una variable local de nombre err que almacena el throw del try.
Esta variable la usamos para escribir en el span campoErrorTexto que está justo al lado del input.
La idea es que como el onKeyup se ejecuta cada vez que levantamos una tecla esto es cada vez que el usuario escribe una tecla. Y por lo tanto se valida en tiempo real.
El campo finally pintará en verde el span campoErrorTexto cuando sea correcto y en rojo cuando no lo sea.
finally{} es una instrucción que se ejecuta siempre pase lo que pase.
En realidad las líneas dentro de finally{} en este ejemplo son prescindibles y se hubiesen podido integrar de otro modo al salir del try catch.
Pero se ha hecho así a modo didáctico.[separator_with_icon icon=»fa-smile-o»]
Una vez try catch finally está en pleno rendimiento el problema que surge es que una vez salimos del cajetín input el span que lo acompaña siempre tiene texto y puede resultar molesto.
En realidad la idea es que si el campo introducido en nombre no es correcto entonces se elimine tanto el aviso de error como el contenido.[separator_with_icon icon=»fa-smile-o»]Querid@ lector@,
Hasta aquí nuestra publicación de hoy.
Ahora te toca a ti abrir el sublime o el brackets y ponerte a trabajar.
Sería muy cómodo que en lugar de poner el código en imágenes te lo dejara listo para copy y pega… pero entonces no cumpliría con mi objetivo de hacerte aprender.
¡Así que manos a la obra!
Si tienes propuestas de mejora del código o dudas soy todo oídos en los comentarios.
Deja una respuesta