contenidosonline-web/static/js/main.js

const header = document.querySelector(".main-header");
const expresiones = {
  nombre: /^.{4,30}$/,
  email: /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/
}

window.addEventListener("scroll", () => {
  const scrollPos = window.scrollY;
  if (scrollPos > 10) {
    header.classList.add("scrolled");
  } else {
    header.classList.remove("scrolled");
  }
})

const form = document.getElementById("contactForm");
const fields = {
  nombre: false,
  email: false,
  mensaje: false
}
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();

  const data = {};
  if (fields.nombre && fields.email && fields.mensaje) {
    inputSubmit.disabled = true;
    inputSubmit.value = "Enviando...";
    for (const input of inputs) {
      if (input.value.length === 0 || input.value === 0) {
        data[input.name] = null  
      } else {
        data[input.name] = input.value;
      }
    }

    console.log('Data', data);
    // form.reset();
  } 
});