Formularios y validaciones con jQuery

jQuery puede simplificar la lectura de campos, la validación visual y el procesamiento de formularios.

Leer valores con val()

const nombre = $("#nombre").val();
const email = $("#email").val();

val() devuelve el valor actual de inputs, selects y otros controles de formulario.

Interceptar submit

$("#formulario").on("submit", function (event) {
    event.preventDefault();

    console.log("Validando...");
});

preventDefault() evita el envío tradicional mientras revisamos los datos.

Validar campos vacíos

const nombre = $("#nombre").val().trim();

if (nombre === "") {
    $("#error-nombre").text("El nombre es obligatorio");
}

Agregar clases según el resultado

if (nombre === "") {
    $("#nombre").addClass("campo-error");
} else {
    $("#nombre").removeClass("campo-error");
}

Separar la lógica de validación de los estilos facilita mantener el formulario.

Checkboxes con prop()

const acepta = $("#terminos").prop("checked");

if (!acepta) {
    console.log("Debe aceptar los términos");
}

Selects

const provincia = $("#provincia").val();

if (!provincia) {
    console.log("Seleccione una provincia");
}

Validación completa

$("#formulario").on("submit", function (event) {
    event.preventDefault();

    const nombre = $("#nombre").val().trim();
    const email = $("#email").val().trim();

    let valido = true;

    $(".error").text("");

    if (nombre === "") {
        $("#error-nombre").text("Ingrese su nombre");
        valido = false;
    }

    if (email === "") {
        $("#error-email").text("Ingrese su correo");
        valido = false;
    }

    if (!valido) {
        return;
    }

    console.log("Formulario válido");
});

Validación del navegador y jQuery

Conviene aprovechar atributos HTML como required, type="email" o minlength. jQuery puede complementar esas reglas cuando necesitamos validaciones de negocio o mensajes personalizados.

Importante: validar también en backend

La validación del navegador mejora la experiencia del usuario, pero no reemplaza la validación del servidor cuando los datos se envían a un backend.

Ejercicio

Creá un formulario con nombre, email, provincia y aceptación de términos. Mostrá mensajes debajo de cada campo cuando haya errores.

Errores comunes

• validar sólo en frontend cuando existe backend;
• no limpiar mensajes anteriores;
• olvidar trim();
• usar attr("checked") en lugar de prop("checked").

---

¿Te sirvió esta guía? ☕

Si este contenido te ayudó a aprender jQuery, podés apoyar a Club Programador. Cada aporte ayuda a mantener el sitio online y a seguir publicando material gratuito.

🇦🇷 Apoyar desde Argentina

☕ Invitame un café con Mercado Pago

🌎 Apoyar desde otro país

☕ Apoyar con PayPal

Seguí aprendiendo jQuery

← Recorrer elementos con jQuery: each(), index() y trabajo con colecciones

AJAX con jQuery: $.ajax(), $.get() y $.post() paso a paso →