Validar Campos de Texto y Textarea con jQuery

 

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.
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.

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.

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.