Validación de campos de formulario con Javascript

js-jquery

Algo que siempre que hay que hacer cuando se desarrolla una aplicación que tenga usuarios en validar los campos de formulario tanto del login como del registro.

A parte de hacer una validación en el lado del servidor, es muy conveniente realizar una en el lado del cliente. De esta manera, no se envía un formulario sin validar primero y no se le hace esperar al usuario a que el servidor valide los datos para saber si tiene un error en alguno de los campos.

Os propongo un formulario de registro simple con una campo de nombre de usuario, otros dos para el password (ha de repetirse el password y los dos han de coincidir) y otro para el email. El formulario sería el siguiente:

Como podeis observar estoy usando las clases de Bootstrap para estilarlo un poco, así que si queres reproducir esto con el estilo de Boostrap, tendréis que vincularlo. Tras aplicar un poco de css para limitar la anchrura, el aspecto sería el siguiente:

form_registro

Bueno ahora toca la parte de Javascript, para ello en vuestro html  vinculad un archivo de javascript qure contenga el siguiente código:

Como se ve, estoy usando JQuery para seleccionar y aplicar la funcionalidad. Así que tendreis que vincularlo (aunque seguramente ya lo habreis hecho para poder usar el js de Bootstrap).

Explicando un poco el código:

Seleccionamos el formulario y vinculamos una función con nuestro código al evento submit del formulario.

En esta función anónima, lo primero que hacemos es quitar el padding del mensaje de error que aparecerá si el usuario comete alguno( si no el párrafo que muestra los errores se quedaría con el padding y se vería, aunque sin contenido pero se vería).

Tras ello creamos unas variables con los valores de los campos del formulario.

Luego comenzamos la validación de los tres campos. En todos los casos primero se comprueba que el campo no esté vacío, pues a pesar que tiene un required en el html, el usuario podría modificar esto desde el navegador web. Si el campo lo está se le manda un aviso al usuario.

Luego cada campo tiene sus propias reglas,para el password le pido que ha de tener mediante una expresión regular que tenga un mínimo de 8 caracteres, un máximo de 20 y que tenga letras, caracteres, números y letras. Esto también se está restringiendo con el maxlenght del input en el html y el atributo pattern de este. Pero como esto puede cambiarlo también el usuario desde el navegador web, lo validamos mediante javascript usando esa expresión y la función .test().

Para el usuario he decicido que el nombre no tenga más de seis caracteres, y solo letras y números (por ejemplo emilio87). De nuevo también se usa una expresión regular para obtener en email válido.

Si cualquiera de los campos no coincide con los parámetros solicitados se manda un mensaje y se devuelve false y el formulario no es enviado, si todo está bíen se devuelve true y se envía el formulario.

Bueno, pues este código es bastante reutilizable y os puede servir como plantilla y usarlo adaptándolo a lo que necesiteis. Espero que lo useis.

 

 


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *