Mail PHP #

// Fetch all the forms we want to apply custom Bootstrap validation styles to
const form = document.getElementById("formulario");
const usuario = document.getElementById("validationCustom01");
const correo = document.getElementById("validationCustom02");
const mensaje = document.getElementById("validationCustom03");
const boton = document.getElementById("boton");

form.addEventListener(
    "submit",
    function (event) {
        event.preventDefault();
        event.stopPropagation();

        const data = new FormData(form);

        // Validar usuario
        if (!data.get("usuario").trim()) {
            console.log("campo vacio usuario");
            campoError(usuario);
            return;
        } else {
            campoValido(usuario);
        }

        // Validar correo
        if (!data.get("correo").trim()) {
            console.log("campo vacio correo");
            campoError(correo);
            return;
        } else {
            campoValido(correo);
        }

        // Validar mensaje
        if (!data.get("mensaje").trim()) {
            console.log(data.get("mensaje"));
            campoError(mensaje);
            return;
        } else {
            campoValido(mensaje);
        }
        console.log("todos los campos completados");

        fetch("formulario.php", {
            method: "POST",
            body: data,
        })
            .then((res) => res.json())
            .then((datos) => {
                console.log(datos);

                if (datos.error && datos.campo === "usuario") {
                    console.log("error con usuario php");
                    campoError(usuario);
                    return;
                }
                campoValido(usuario);

                if (datos.error && datos.campo === "correo") {
                    console.log("error con correo php");
                    campoError(correo);
                    return;
                }
                campoValido(correo);

                if (datos.error && datos.campo === "mensaje") {
                    console.log("error con mensaje php");
                    campoError(mensaje);
                    return;
                }
                campoValido(mensaje);

                if (datos.error && datos.campo === "mail") {
                    console.log("Existe un error con la función mail de php.");
                    campoError(boton);
                    return;
                }

                if (!datos.error) {
                    limpiarFormulario(form);
                    campoValido(boton);
                }
            })
            .catch((e) => {
                console.log(e);
                campoError(boton);
            });
    },
    false
);

const campoError = (campo) => {
    campo.classList.add("is-invalid");
    campo.classList.remove("is-valid");
};

const campoValido = (campo) => {
    campo.classList.remove("is-invalid");
    campo.classList.add("is-valid");
};

const limpiarFormulario = (form) => {
    console.log("Mensaje enviado con éxito!");
    form.reset();
    correo.classList.remove("is-valid");
    usuario.classList.remove("is-valid");
    mensaje.classList.remove("is-valid");
};