JS 22: Validación de Formularios

Aprende a validar datos en el cliente de forma robusta y profesional

1. El "Método Definitivo": La Función de Validación

Aunque existen muchas formas de validar, el método más ordenado y robusto es utilizar una única función que valide cada campo secuencialmente. Si un campo falla, devolvemos false inmediatamente (deteniendo el envío). Si llegamos al final, devolvemos true.

La estructura Maestra

function validarTodo(formulario) {
    // 1. Validar nombre
    if (formulario.nombre.value.trim() === "") {
        alert("Escribe tu nombre");
        formulario.nombre.focus();
        return false;
    }

    // 2. Validar email con RegEx
    const regexEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!regexEmail.test(formulario.email.value)) {
        alert("Email no válido");
        formulario.email.focus();
        return false;
    }

    // 3. Validar checkbox
    if (!formulario.terminos.checked) {
        alert("Debes aceptar los términos");
        return false;
    }

    // ¡Todo OK!
    return true;
}

2. ¿Cómo y dónde colocar la llamada?

La llamada debe ir en la cabecera de la etiqueta <form>, utilizando el evento onsubmit.

Es crucial incluir la palabra return antes del nombre de la función para que el navegador sepa si debe ejecutar o detener el envío. 

<form action="enviar.php" method="POST" onsubmit="return validarTodo(this)">
    <input type="text" name="nombre" placeholder="Nombre...">
    <button type="submit">Enviar</button>
</form>

3. El uso del this

En el atributo onsubmit, la palabra reservada this hace referencia al elemento actual: el formulario mismo.

4. Validando todo tipo de campos

Campos de Texto y Longitud

if (formulario.pass.value.length < 8) {
    alert("La clave debe tener al menos 8 caracteres");
    return false;
}

Selectores (Drop-downs)

Asegúrate de que la primera opción (por defecto) tenga un valor vacío value="".

if (formulario.pais.value === "") {
    alert("Selecciona un país");
    return false;
}

Radio Buttons (¿Cuál está marcado?)

Los radios funcionan como un array. Podemos usar some() o un bucle for.

// Forma moderna:
const radios = Array.from(formulario.genero);
if (!radios.some(r => r.checked)) {
    alert("Selecciona un género");
    return false;
}

Confirmación de Password

if (formulario.pass1.value !== formulario.pass2.value) {
    alert("Las contraseñas no coinciden");
    return false;
}

Validación Avanzada de Checkboxes

A veces no basta con validar si "está marcado". Necesitamos contar cuántos.

// 1. Mínimo y Máximo de opciones seleccionadas
const chks = document.querySelectorAll('input[name="intereses[]"]:checked');
if (chks.length < 2) {
    alert("Elige al menos 2 intereses");
    return false;
}
if (chks.length > 5) {
    alert("Máximo 5 intereses permitidos");
    return false;
}

// 2. Validación Dependiente (Si marca "Otros", debe escribir cuál)
if (formulario.chk_otros.checked && formulario.txt_otros.value.trim() === "") {
    alert("Si marcas 'Otros', especifica cuál por favor.");
    formulario.txt_otros.focus();
    return false;
}

5. Ejemplo Maestro Completo

Copia y adapta este esquema para cualquier proyecto profesional.

<script>
function masterValidator(f) {
    // Limpiar espacios
    const nombre = f.nombre.value.trim();
    const email = f.email.value.trim();

    // Validar Nombre
    if (nombre.length < 3) {
        alert("El nombre es demasiado corto");
        f.nombre.focus();
        return false;
    }

    // Validar Email
    const regex = /^\w+([.-_+]?\w+)*@\w+([.-]?\w+)*(\.\w{2,10})+$/;
    if (!regex.test(email)) {
        alert("El formato del email no es válido");
        f.email.focus();
        return false;
    }

    // Validar Checkbox de privacidad
    if (!f.privacidad.checked) {
        alert("Debes aceptar la política de privacidad");
        return false;
    }

    // Si llegamos aquí, todo es correcto
    console.log("Datos listos para enviar:", { nombre, email });
    return true;
}
</script>

💡 Pro-Tips de UX

Volver a JS