Validar formularios con jQuery – Parte 1

Validar formularios con jQuery – Parte 1

Un formulario con con campos de texto es necesario validarlo para impedir que se introduzcan valores incorrectos o dejen los cuadros vacíos. Vamos a ver lo sencillo que es validar con jQuery los formularios. Para todas las validaciones, vamos a utilizar funciones de JavaScript y de jQuery, en ningún momento utilizaremos expresiones regulares, ya que estas las veremos más adelante.

Primero vamos a ver una amplia variedad de campos que podemos encontrar en los formularios y cómo se validan. Estos campos van a ser los siguientes:

IMPORTANTE: todos los campos van a ser validados sin tener en cuenta que tienen que estar obligatoriamente cumplimentados.

Para ese fin se utiliza otros métodos distintos.

Validar campo NOMBRE con JavaScript / jQuery

Para validar un campo de texto que solamente vaya a contener un nombre, solamente debemos tener claro que un nombre se compone de letras y espacios, nunca debe haber números. Con esos datos, y sin expresiones regulares, vamos a ver qué soluciones podemos encontrar.Lo único que no vamos a validar es que contenga caracteres extraños o símbolos, ya que existen muchos idiomas diferentes que tienen caracteres únicos. 

Teniendo claro todo lo anterior, solamente nos queda validar que no contenga números. Para ello, jQuery nos ofrece la función isNumeric(), la cual nos indica mediante true o false si el carácter que le pasamos como parámetro es numérico o no.

JavaScript interpreta los String como un array de caracteres. Esto significa que podremos recorrer el String como si de un array se tratara y así ir comprobando cada carácter si es numérico o no.

Entonces vamos a crear una función, que pasándole como parámetro un string, nos devuelva si es un nombre o no, en función de si hay algún número entre sus letras.

La función validarCampoNombre() quedará de la siguiente manera:

¿Necesitas una impresora?

En este enlace encontrarás una selección de las mejores impresoras actuales

Ir a MejoresImpresoras.com

Copy to Clipboard

Validar campo APELLIDOS con JavaScript / jQuery

Si queremos validar un campo de texto que solamente contenga apellidos, podemos partir de la base de la función anterior de como validar un campo de nombre. En este caso, va a ser exactamente igual para validar que no contiene números, pero también hay que validar que contenga más de una palabra. 

Para ello vamos a hacer uso de la función split(). Esta función convierte un string en un array pasándole como parámetro un carácter separador. Vamos a ver un ejemplo:

Partimos de un string de la siguiente forma:

Tutoriales jQuery es la mejor web para aprender a programar

Si le aplicamos la función la función split() y utilizamos el carácter espacio “ ” como separador, nos quedará el siguiente array:

array[0] = “Tutoriales”

array[1] = “jQuery”

array[2] = “es”

array[3] = “la”

array[4] = “mejor”

array[5] = “web”

array[6] = “para”

array[7] = “aprender”

array[8] = “a”

array[9] = “programar”

Como podemos ver en el ejemplo, nos ha separado todas las palabras de la frase asignando cada una a un índice del array. De esta forma, si medimos la longitud del array, podemos saber de cuantas palabras consta el string. Sabiendo esto, ya podemos saber si introduce menos de 2 palabras en los apellidos.

La función validarCampoApellidos() quedará de la siguiente manera:

Copy to Clipboard

Validar campo CÓDIGO POSTAL con JavaScript / jQuery

Antes hemos visto cómo validar solamente letras. En cambio, en este caso, validaremos solamente números utilizando también la función isNumeric de jQuery. En España, los códigos postales se componen exactamente de 5 dígitos.

Todos los input de tipo texto en html, jQuery los considera como tal, es decir, si recogemos su valor en una variable, esta será de tipo string. Esto nos facilita mucho la labor de contar números, ya que podemos utilizar la longitud del texto para saber si tiene 5 números. Por último, para saber si todos los caracteres son dígitos(numéricos), bastará con usar la función isNumeric() pero negando su resultado con la exclamación cerrada (!), de esta forma preguntaremos: ¿NO es numérico?. En ese caso será inválido el código postal, ya que el carácter no es un número.

La función validarCampoCodigoPostal() quedará así:

Copy to Clipboard

Validar campo DNI/NIF con JavaScript / jQuery

El siguiente paso va a ser validar un campo DNI/NIF. El NIF es el Número de Identificación Fiscal, comúnmente confundido con el DNI, que es el Documento Nacional de Identidad. El DNI engloba todo el documento, incluido el NIF, entonces lo que vamos a validar realmente es el NIF. El NIF se compone de 8 dígitos y 1 letra. La letra no es una letra al azar. La letra se calcula de la siguiente manera. Primero hay que realizar la división de los números que componen el NIF entre 23 y, el resto de dicha división se utiliza para calcular la posición de la letra en una cadena. Esta cadena no sigue la sucesión lógica del alfabeto, si no la siguiente sucesión:

 T R W A G M Y F P D X B N J Z S Q V H L C K E T 

Si suponemos que el resto de la división nos ha dado 4, la letra que le corresponde a ese NIF es la A.

Teniendo claro todo lo anterior, el flujo de nuestra función validarCampoNIF() será el siguiente:

  1. Saber si tienen en total 9 caracteres (8 números + 1 letra).
  2. Saber si los 8 primeros caracteres son números.
  3. Saber si el último carácter es una letra.
  4. Saber si la letra es correcta.

En esta función cada paso depende del anterior, es decir, que si el campo anterior no pasa la validación, no pasa al siguiente. Esta forma de trabajo la hemos decidido porque, a diferencia de las anteriores, debe ejecutar un mayor número de validaciones. De esta forma tampoco le hacemos trabajar a la función ejecutando tareas extras que van a mermar el rendimiento de nuestro programa.

La función validarCampoNIF() va a quedar de la siguiente forma:

Copy to Clipboard

Validar campo TELÉFONO con JavaScript / jQuery

En el caso de que nos encontremos con la necesidad de validar un campo que sea un número de teléfono, vamos a desarrollar una función muy parecida a la del campo código postal. La única diferencia va a ser que en vez de ser 5 dígitos, van a ser 9 u 8 dígitos, en función del prefijo de teléfono que utilice. Si queremos ampliar más información sobre los prefijos de teléfono, en la siguiente web podemos encontrar todos los prefijos de teléfono. https://www.prefijotelefono.com

La función validarCampoTelefono() va a ser la siguiente:

Copy to Clipboard

Validar campo CORREO ELECTRÓNICO / EMAIL con JavaScript / jQuery

Para validar un campo de correo electrónico debemos tener en cuenta varias premisas. Un correo electrónico consta básicamente 5 apartados:

  • Nombre del buzón: se compone de caracteres alfanuméricos, así como de signos tales como el punto, el guión o la barra baja. En este caso, puesto que no vamos a utilizar expresiones regulares, solamente validaremos que no contenga espacios.
  • Una arroba (@): se utiliza para separar el buzón del dominio.
  • Un dominio: se compone únicamente de letras y números.
  • Un puto: su función es separar el dominio de la extensión.
  • Una extensión: indica la extensión del dominio: .com, .es…

Vamos a ver mediante un pequeño diagrama, cuál va a ser el funcionamiento de nuestra función de validación. Supongamos que tenemos la siguiente dirección de correo:

webmaster@tutorialesjquery.com

Lo primero que tendremos que saber es si contiene única y exclusivamente una arroba. Para ello, podemos hacer uso de la función split() la cual nos va a devolver un array. Este array tiene que tener una longitud de 2 para que el email pase la validación.

  1. Parte 1: webmaster
  2. Parte 2: tutorialesjquery.com

Lo siguiente será analizar la primera parte del array. Esta va a contener el nombre del buzón, del que solamente tendremos que analizar que no tenga espacios.

Siguiendo con la validación, nos quedan únicamente 3 comprobaciones. Ahora tendremos que analizar la segunda parte del array que hemos obtenido antes. Esta parte tiene que contener solamente un punto, que hace de separador entre el dominio y su extensión. Para validarlo, volvemos a utilizar la función split(). Una vez estemos seguros de que solamente contiene un punto, lo único que nos queda por analizar es que ninguna de las partes contiene espacios. Como podemos ver, la función split() nos ofrece muchas posibilidades a la hora de validar campos de texto. De igual forma que hemos hecho en otras validaciones que constaban de varios niveles, en esta también ejecutaremos el siguiente nivel si ha superado el nivel anterior.

Por último, vamos a ver como quedaría la función validarCampoEmail():

Copy to Clipboard

Validar campo FECHA con JavaScript / jQuery

Si nos encontramos con la situación de tener que validar un campo fecha tendremos que tener en cuenta unas cuestiones muy básicas:

  • Que sean 3 grupos de números separados. En este caso utilizaremos la barra “/” como separador.
  • Que el primero grupo sea mayor que 0 y menor que 32. No vamos a tener en cuenta febrero ni años bisiestos. Vamos a suponer que todos los meses tienen 31 días.
  • Que el segundo grupo sea mayor que 0 y menor que 13.
  • Que el tercer grupo sea mayor que 0.

Ya no tenemos que tener nada más en cuenta. Como podemos intuir por la explicación anterior, va a ser una validación muy sencilla. 

A continuación podemos ver el código de la función validarCampoFecha():

Copy to Clipboard

Validar campo EDAD con JavaScript / jQuery

Para terminar con las validaciones, vamos a ver como podríamos validar un campo correspondiente a la edad. Este es el más sencillo de todos, ya que lo único que tendremos que validar es que sea numérico y mayor que 0.

La función validarCampoEdad() será la siguiente:

Copy to Clipboard

Para terminar, puedes encontrar dos enlaces: uno con la demostración de como funciona y otro con la descarga del proyecto completo con el código fuente.

4.8 (95.91%) 44 votes

2020-10-09T09:27:11+00:00

2 Comments

  1. […] validarCampoNombre() […]

  2. […] validarCampoNombre() […]

Deja tu comentario