Validar campos de texto con jQuery

Validar campos de texto con jQuery

Buscando en Internet encontré muchos artículos y tutoriales que mostraban como supuestamente se podían validar campos utilizando jQuery. Digo supuestamente porque la solución que presentaban muchos de ellos no era la indicada y presentaban fallas. Para explicar las fallas mencionadas vamos a considerar el siguiente código en el que intentaremos validar campos de texto cuando se haga clic sobre un botón, es decir, que no pueda quedar vacío:

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

    // Se verifica que el valor del campo este vacio
    if ($('#name').val() === '') {
        alert('El campo esta vacio');
    } else {
        alert('Campo 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.

La verdadera solución es eliminar los espacios en blanco que esten 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() {

    //Se verifica que el valor del campo este vacio y se eliminan los espacios
    if ($('#name').val().trim() === '') {
        alert('El campo esta vacio');
    } else {
        alert('Campo correcto');
    }
});

Otro problema presentado al momento de validar campos es verificar su longitud mínima. Para ello vamos a considerar el siguiente código:

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

    //Se obtiene el valor del campo
    var name = $('#name').val();

    //Se verifica que el valor del campo este vacio
    if (name === '') {
        alert('El campo esta vacio');
    }
    //Se verifica longitud del campo
    else if (name.length < 4) {
        alert('El valor del campo es muy corto');
    } else {
        alert('Campo correcto');
    }
});

Es este código se presenta el mismo problema de los espacios y simplemente lo podemos solucionar de la misma manera que el primer ejemplo.

Nota: Para que un campo pueda ser validado debe tener un ID asignado para evitar colisiones entre los nombres de los campos ya que los ID no se puede repetir y los nombre si.

Cabe destacar que hoy en día es poco común realizar validaciones manuales con jQuery ya que existen infinidad de plugins que ya lo hacen, pero en ocasiones que se necesiten hacer las validaciones manualmente te puede resultar de utilidad conocer la forma correcta de hacerlo.

En el siguiente artículo continuaremos con la validación de campos, en específico campos select utilizando solo jQuery para conseguirlo.
 

Comentarios

Deja tu comentario

http://