Validar campos de texto y textarea con jQuery

Validar campos de texto y textarea con jQuery
  • Eborio Linárez
  • October 16, 2013
  • 0

Tal como expuse el post introductorio de este tutorial. Mi intención es mostrar la forma correcta de validar campos utilizando jQuery. En esta primera publicación validaremos campos de texto y textarea para garantizar que no queden vacíos y posteriormente validaremos la longitud del texto ingresado en tales campos.

Validar campo requerido

Veamos el siguiente fragmento de código.

$('#validate').click(function() {

    if ($('#name').val() === '') {
        alert('El campo es requerido');

    } else {
        alert('Campo correcto');
    }
});

El código es sencillo. Al hacer clic a un botón con el ID validate se verifica si el valor de un campo con el ID name está vacío o no. En caso de estar vacío se muestra un alert indicándolo y en caso contrario se indica que el campo es correcto.

A primera vista podemos considerar que el procedimiento es correcto, pero si el usuario en lugar de escribir en el campo solo coloca espacios en blanco el script validará el campo como correcto.

Puedes probar el código en el siguiente ejemplo.

See the Pen Validación de campos de texto y textarea con jQuery by Eborio Linárez (@eborio) on CodePen.

La solución correcta es eliminar los espacios en blanco que se encuentren al principio y al final del contenido del campo utilizando el método trim() de jQuery.

Veamos el código correcto para comprobar si un campo esta vacío o no.

$('#validate').click(function() {

    if ($('#name').val().trim() === '') {
        alert('El campo es requerido');

    } else {
        alert('Campo correcto');
    }
});

Veamos con un ejemplo en vivo el código en funcionamiento.

See the Pen Validación de campos de texto y textarea con jQuery (Forma correcta) by Eborio Linárez (@eborio) on CodePen.

Validar longitud del campo

 Para validar la longitud consideremos el siguiente fragmento de código.

$('#validate').click(function() {

    var name = $('#name').val().trim();

    if (name === '') {
        alert('El campo es requerido');

    } else if (name.length < 4) {
        alert('La longitud del campo debe ser de al menos 4 caracteres');

    } else {
        alert('Campo correcto');
    }
});

En este ejemplo almacenamos en una variable el contenido del campo name. Validamos si está o no vacío y luego con la propiedad length verificamos la longitud del texto ingresado. Puedes probarlo en el siguiente ejemplo en vivo.

See the Pen Validación de campos de longitud de un campo by Eborio Linárez (@eborio) on CodePen.

Para validar un campo de forma sencilla debe tener un ID asignado para evitar colisiones entre los nombres de los campos ya que los IDs no se pueden repetir y los nombres si.

Para validar textareas el procedimiento es exactamente el mismo que para los campos de texto.

Nos vemos en la siguiente publicación en donde validaremos campos select o listas desplegables. Si tienes alguna mejora para el post no dudes en dejarla en los comentarios. No olvidemos compartirlo en tus redes sociales.

Comparte en las redes sociales

Comentarios

Aún no hay comentarios. Sé el primero en comentar.

Deja un comentario