const form = document.querySelector("#formulario");

function mostrarError(id, mensaje) {
    document.querySelector(id).textContent = mensaje;
}

function limpiarError(id) {
    document.querySelector(id).textContent = "";
}

form.addEventListener("submit", (e) => {
    e.preventDefault();

    const nombre = document.querySelector("#nombre").value.trim();
    const edad = document.querySelector("#edad").value.trim();
    const password = document.querySelector("#password").value;

    // Limpiamos todos los errores antes de volver a validar.
    limpiarError("#error-nombre");
    limpiarError("#error-edad");
    limpiarError("#error-password");
    document.querySelector("#exito").textContent = "";

    let valido = true;

    if (nombre === "") {
        mostrarError("#error-nombre", "El nombre no puede estar vacío.");
        valido = false;
    }

    if (edad === "" || parseInt(edad) < 0 || parseInt(edad) > 100) {
        mostrarError("#error-edad", "La edad no tiene un formato válido.");
        valido = false;
    }

    if (password.length < 8) {
        mostrarError("#error-password", "La contraseña debe tener al menos 8 caracteres.");
        valido = false;
    }

    // Solo mostramos el éxito si todos los campos son válidos.
    if (valido) {
        document.querySelector("#exito").textContent = "Formulario enviado correctamente.";
        form.reset();  // reset() limpia todos los campos del formulario
    }
});