Validación de campos try catch finally en Javascript puro

Como se usa try catch finally

Validación de campos try catch finally en Javascript puro

Print Friendly, PDF & Email
Validación de campos try catch finally en Javascript puro
Valora esta entrada
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.

estructura para validación de campos
estructura try catch throw finally para validación de campos

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.

html de un formulario web
html del formulario web validado en el ejemplo

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.

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.

Como se usa try catch finally
Ejemplo de validación try catch finally

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.

código función reset del ejemplo
Código sin minimizar de la función reset()

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.

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.

Entradas relacionadas:

Eliminar el comportamiento por defecto de un elemento html
- 229
Explicamos como desactivar el comportamiento por defecto de un elemento HTML mediante el uso del método javacript preventDefault()
Como eliminar nodos del DOM mediante Javascript
- 469
Resumimos como eliminar nodos del DOM mediante javascript y siguiendo una estrategia sencilla mediante .removeChild()
Ejercicio – Acoplamiento de javascript en un documento web
- 142
Ejercicio y solución de un problema introductorio al mundo del Javascript.
Ejercicio – Cálculo del perímetro de un rectángulo mediante funciones
- 87
Ejercicio en el que se práctica de modo fácil la lógica de programación mediante el uso de funciones declaradas en JS.
Ejercicio – Generación iterativa de encabezados html
- 57
Ejercicio dónde se generan los encabezados h1 a h6 mediante javascript. Incluye solución.
Ejercicio – Generación de una fecha personalizada mediante javascript
- 65
Ejercicio javascript dónde se trabaja con fechas y los métodos para fechas con el objetivo de crear fechas con formato personalizado.
Ejercicio – ¿Qué declaraciones de variables son erróneas en JS?
- 111
En este ejercicio repasamos los conceptos relativos a la declaración de variables en javascript. ¿Qué declaraciones son incorrectas? Detéctalas y corrígelas.
Ejercicio – Generación de un dado de 6 caras con javascript
- 82
Ejercicio con solución dónde se genera un dado de 6 caras y se tira el dado 1000 veces para comprobar cuantas veces ha salido cada tirada.
Introducción a los eventos javascript
- 277
Repasamos las distintas formas que existen de asociar eventos javascript a etiquetas html. Ya sea por acoplamiento directo o como evento semántico. Comparamos también con addEventListener()
Ejercicio – ¿Qué hora es? Programación de un reloj muy sencillo en JS
- 84
Ejemplo de programación de un script que devuelve una hora con formato personalizado hh:mm:ss.
Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.