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:

Ejercicio – Sumas con letras
- 187
En este ejercicio vemos de forma práctica si la suma de valores numéricos o strings resulta en una suma o una concatenación.
El Document object model (DOM) de Javascript
- 405
El DOM es un tipo especial de objeto que esquematiza las relaciones y interacciones entre los nodos de un documento web y que es creado por el navegador cada vez que interpreta una página web. Cada et...
Ejercicio – Crear una lista de recordatorios
- 144
Ejercicio javascript solucionado para crear una lista de recordatorios y que es capaz de resetear todos los nodos. Apuntes de clase.
Ejercicio – Generación de una fecha personalizada mediante javascript
- 136
Ejercicio javascript dónde se trabaja con fechas y los métodos para fechas con el objetivo de crear fechas con formato personalizado.
Métodos javascript
- 439
Javascript es un lenguaje basado en métodos. Existen muchos métodos predefinidos que afectan a arrays, strings, números y casi cualquier variable de tipo objeto. Veamos un resumen de los más important...
Introducción a los eventos javascript
- 383
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()
Eliminar el comportamiento por defecto de todos los enlaces de una web
- 77
Ejercicio javascript dónde se inhabilitan todos los enlaces al cargar una web. Al hacer click en un botón se activan de nuevo. Incluye solución.
Sintaxi y gramática básica de las variables en javascript
- 295
Javascript es un lenguaje. Tiene una sintaxis y una gramática básicas que hay que aprender. Vemos cuales son estas normas para el caso de las variables en JS y dónde debes hacer hincapié en no equivoc...
Ejercicio – Escribir un texto almacenado en una variable
- 177
Este es un simple ejercicio cuyo objetivo es únicamente coger un poco de soltura usando expresiones típicas en javascript.
Javascript: Acoplamiento
- 682
En entradas anteriores hemos visto el origen de javascript como una de las aportaciones de Netscape a la web y como un lenguaje muy útil para aprender a programar. Este lenguaje de script nos permite ...
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.