contenidosonline-web/static/js/main.js

// CONFIGURATION NAVBAR
const header = document.querySelector(".main-header");
window.addEventListener("scroll", () => {
  const scrollPos = window.scrollY;
  if (scrollPos > 10) {
    header.classList.add("scrolled");
  } else {
    header.classList.remove("scrolled");
  }
})

// CONFIGURATION FORM

const form = document.getElementById("contactForm");
const fields = {
  nombre: false,
  email: false,
  mensaje: false
}
const expresiones = {
  nombre: /^.{4,30}$/,
  email: /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/
}
const loader = document.querySelector(".contact-form-loader");
const inputs = document.querySelectorAll("input:not([type='submit']), textarea");
const inputSubmit = document.querySelector("input[type='submit']")

const validateForm = (e) => {
  switch (e.target.name) {
    case "nombre":
      validateField(expresiones.nombre, e.target, 'nombre');
      break;
    case "email":
      validateField(expresiones.email, e.target, 'email');
      break;
    case "mensaje":
      if (e.target.value.length === 0) {
        document.querySelector("textarea[name='mensaje'] + .formulario__input-error").classList.remove('none')
        fields.mensaje = false;
      } else {
        document.querySelector("textarea[name='mensaje'] + .formulario__input-error").classList.add('none')
        fields.mensaje = true;
      }
      break;
  }
}

const validateField = (expresion, input, field) => {
  if (expresion.test(input.value)) {
    document.querySelector(`input[name='${field}']`).classList.remove('input__border-error')
    document.querySelector(`input[name='${field}'] + .formulario__input-error`).classList.add('none')
    fields[field] = true;
  } else {
    document.querySelector(`input[name='${field}']`).classList.add('input__border-error')
    document.querySelector(`input[name='${field}'] + .formulario__input-error`).classList.remove('none')
    fields[field] = false;
  }
}

inputs.forEach((input) => {
  input.addEventListener('keyup', validateForm);
  input.addEventListener('blur', validateForm);
});

form.addEventListener('submit', (e) => {
  e.preventDefault();
  if (fields.nombre && fields.email && fields.mensaje) {
    inputSubmit.disabled = true;
    inputSubmit.value = "Enviando...";

    const serviceID = 'default_service';
    const templateID = 'template_ab3seev';

    emailjs.sendForm(serviceID, templateID, document.getElementById("contactForm"))
      .then(() => {
        inputSubmit.value = 'Enviar';
        document.querySelector(".contact-form-response").classList.remove('none');
        form.reset();
      }, (err) => {
        inputSubmit.value = 'Enviar';
        // console.log(JSON.stringify(err));
      });
  }
});