Código JavaScript Funcionalidad Formulario Registro

<script>
(function () {

  // ─── ÚNICA LÍNEA QUE HAY QUE EDITAR ──────────
  var OV_RE_URL = 'TU_URL_DE_APPS_SCRIPT_AQUI';
  // ─────────────────────────────────────────────

  var ovReCampos = [];

  // ═══════════════════════════════════════════
  //  PRECARGADOR
  // ═══════════════════════════════════════════
  function ovReMostrarFormulario() {
    var preloader = document.getElementById('ov-re-preloader');
    var formWrap  = document.getElementById('ov-re-form-wrap');
    if (preloader) preloader.classList.add('ov-re-oculto');
    if (formWrap)  formWrap.style.display = 'block';
  }

  function ovReMostrarErrorCarga() {
    var preloader = document.getElementById('ov-re-preloader');
    if (preloader) {
      preloader.innerHTML = '<span style="color:#c0392b;">⚠️ No se pudo cargar el formulario. Recarga la página.</span>';
    }
  }

  // ═══════════════════════════════════════════
  //  INIT — carga campos y cupos en paralelo
  // ═══════════════════════════════════════════
  function ovReInit() {
    Promise.all([
      fetch(OV_RE_URL + '?action=campos').then(function (r) { return r.json(); }),
      fetch(OV_RE_URL + '?action=cupos').then(function (r) { return r.json(); }),
    ])
    .then(function (resultados) {
      ovReCampos = resultados[0].campos || [];
      var cupos  = resultados[1];

      ovReGenerarCampos(ovReCampos);
      ovReActualizarCupos(cupos);
      ovReBindInputs();
      ovReBindForm();
      ovReMostrarFormulario();
    })
    .catch(function () {
      console.error('OV-RE: No se pudo conectar con el servidor.');
      ovReMostrarErrorCarga();
    });
  }

  // ═══════════════════════════════════════════
  //  BARRA DE CUPOS
  // ═══════════════════════════════════════════
  function ovReActualizarCupos(cupos) {
    var elCount = document.getElementById('ov-re-spots-count');
    var elBar   = document.getElementById('ov-re-bar-fill');
    var elWrap  = document.getElementById('ov-re-spots-wrap');

    if (cupos.ilimitado) {
      if (elWrap) elWrap.style.display = 'none';
      return;
    }

    var restantes = Math.max(0, cupos.maximo - cupos.registrados);
    var pct       = Math.min(100, (cupos.registrados / cupos.maximo) * 100);

    if (elCount) elCount.textContent = restantes;
    if (elBar) {
      setTimeout(function () {
        elBar.style.width = pct + '%';
      }, 500);
    }
  }

  // ═══════════════════════════════════════════
  //  GENERAR CAMPOS DINÁMICAMENTE
  // ═══════════════════════════════════════════
  function ovReGenerarCampos(campos) {
    var contenedor = document.getElementById('ov-re-campos-dinamicos');
    if (!contenedor) return;

    contenedor.innerHTML = '';

    campos.forEach(function (campo) {
      var fieldDiv = document.createElement('div');
      fieldDiv.className = 'ov-re-field';

      // Label
      var label = document.createElement('label');
      label.setAttribute('for', 'ov-re-field-' + campo.nombre);
      label.textContent = campo.etiqueta + (campo.requerido ? '' : ' (opcional)');
      fieldDiv.appendChild(label);

      if (campo.tipo === 'select') {
        var input = document.createElement('select');
        input.id   = 'ov-re-field-' + campo.nombre;
        input.name = campo.nombre;
        if (campo.requerido) input.dataset.requerido = 'true';

        var optDefault = document.createElement('option');
        optDefault.value = '';
        optDefault.textContent = '— Selecciona una opción —';
        input.appendChild(optDefault);

        campo.opciones.forEach(function (opcion) {
          var opt = document.createElement('option');
          opt.value = opcion;
          opt.textContent = opcion;
          input.appendChild(opt);
        });

        // Wrapper para el ícono ::after de ETmodules
        var selectWrap = document.createElement('div');
        selectWrap.className = 'ov-re-field-select-wrap';
        selectWrap.appendChild(input);
        fieldDiv.appendChild(selectWrap);

      } else if (campo.tipo === 'textarea') {
        var input = document.createElement('textarea');
        input.id   = 'ov-re-field-' + campo.nombre;
        input.name = campo.nombre;
        input.rows = 4;
        if (campo.placeholder) input.placeholder = campo.placeholder;
        if (campo.requerido) input.dataset.requerido = 'true';
        fieldDiv.appendChild(input);

      } else {
        var input = document.createElement('input');
        input.id   = 'ov-re-field-' + campo.nombre;
        input.name = campo.nombre;
        input.type = campo.tipo || 'text';
        if (campo.placeholder) input.placeholder = campo.placeholder;
        if (campo.requerido) input.dataset.requerido = 'true';
        fieldDiv.appendChild(input);
      }

      // Mensaje de error
      var errSpan = document.createElement('span');
      errSpan.className   = 'ov-re-field-error';
      errSpan.id          = 'ov-re-err-' + campo.nombre;
      errSpan.textContent = campo.etiqueta + ' es requerido';
      fieldDiv.appendChild(errSpan);

      contenedor.appendChild(fieldDiv);
    });
  }

  // ═══════════════════════════════════════════
  //  VALIDACIÓN DINÁMICA
  // ═══════════════════════════════════════════
  function ovReValidar() {
    var ok = true;

    ovReCampos.forEach(function (campo) {
      if (!campo.requerido) return;

      var el    = document.getElementById('ov-re-field-' + campo.nombre);
      var errEl = document.getElementById('ov-re-err-' + campo.nombre);
      if (!el || !errEl) return;

      var valido;
      if (campo.tipo === 'email') {
        valido = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(el.value);
        errEl.textContent = 'Ingresa un correo válido';
      } else {
        valido = el.value.trim() !== '';
        errEl.textContent = campo.etiqueta + ' es requerido';
      }

      if (!valido) {
        el.classList.add('ov-re-error');
        errEl.classList.add('ov-re-show');
        ok = false;
      } else {
        el.classList.remove('ov-re-error');
        errEl.classList.remove('ov-re-show');
      }
    });

    var terminos    = document.getElementById('ov-re-terminos');
    var errTerminos = document.getElementById('ov-re-err-terminos');
    if (terminos && errTerminos) {
      if (!terminos.checked) {
        errTerminos.classList.add('ov-re-show');
        ok = false;
      } else {
        errTerminos.classList.remove('ov-re-show');
      }
    }

    return ok;
  }

  // ═══════════════════════════════════════════
  //  LIMPIAR ERRORES AL ESCRIBIR
  // ═══════════════════════════════════════════
  function ovReBindInputs() {
    ovReCampos.forEach(function (campo) {
      var el = document.getElementById('ov-re-field-' + campo.nombre);
      if (!el) return;
      el.addEventListener('input', function () {
        el.classList.remove('ov-re-error');
        var errEl = document.getElementById('ov-re-err-' + campo.nombre);
        if (errEl) errEl.classList.remove('ov-re-show');
      });
    });
  }

  // ═══════════════════════════════════════════
  //  MOSTRAR / OCULTAR ESTADOS
  // ═══════════════════════════════════════════
  function ovReMostrar(id) {
    var wrap = document.getElementById('ov-re-form-wrap');
    if (wrap) wrap.style.display = 'none';
    var el = document.getElementById(id);
    if (el) el.classList.add('ov-re-visible');
  }

  function ovReOcultarEstados() {
    ['ov-re-estado-success', 'ov-re-estado-espera', 'ov-re-estado-error'].forEach(function (id) {
      var el = document.getElementById(id);
      if (el) el.classList.remove('ov-re-visible');
    });
    var wrap = document.getElementById('ov-re-form-wrap');
    if (wrap) wrap.style.display = 'block';
  }

  function ovReResetForm() {
    var form = document.getElementById('ov-re-form');
    if (form) form.reset();
    ovReOcultarEstados();
    fetch(OV_RE_URL + '?action=cupos')
      .then(function (r) { return r.json(); })
      .then(ovReActualizarCupos);
  }

  window.ovReOcultarEstados = ovReOcultarEstados;
  window.ovReResetForm      = ovReResetForm;

  // ═══════════════════════════════════════════
  //  ARMAR RESUMEN DE CONFIRMACIÓN
  // ═══════════════════════════════════════════
  function ovReArmarResumen(valores) {
    var lineas = '';
    ovReCampos.forEach(function (campo) {
      var val = valores[campo.nombre];
      if (val && val !== '—') {
        lineas += '<strong>' + campo.etiqueta + ':</strong> ' + val + '<br/>';
      }
    });
    return lineas;
  }

  // ═══════════════════════════════════════════
  //  SUBMIT
  // ═══════════════════════════════════════════
  function ovReBindForm() {
    var form = document.getElementById('ov-re-form');
    if (!form) return;

    form.addEventListener('submit', function (e) {
      e.preventDefault();
      if (!ovReValidar()) return;

      var btn = document.getElementById('ov-re-btn-submit');
      var txt = document.getElementById('ov-re-btn-text');
      var spn = document.getElementById('ov-re-spinner');
      var arr = document.getElementById('ov-re-btn-arrow');

      if (btn) btn.disabled = true;
      if (txt) txt.textContent = 'Enviando...';
      if (spn) spn.style.display = 'block';
      if (arr) arr.style.display = 'none';

      var valores = {};
      ovReCampos.forEach(function (campo) {
        var el = document.getElementById('ov-re-field-' + campo.nombre);
        if (el) valores[campo.nombre] = el.value.trim();
      });

      var params = new URLSearchParams({ action: 'registrar' });
      Object.keys(valores).forEach(function (key) {
        params.append(key, valores[key]);
      });

      fetch(OV_RE_URL + '?' + params.toString())
        .then(function (res) { return res.json(); })
        .then(function (data) {
          ovReOcultarEstados();

          if (data.status === 'ok') {
            var resumen = document.getElementById('ov-re-resumen-registro');
            if (resumen) resumen.innerHTML = ovReArmarResumen(valores);
            ovReMostrar('ov-re-estado-success');
            fetch(OV_RE_URL + '?action=cupos')
              .then(function (r) { return r.json(); })
              .then(ovReActualizarCupos);

          } else if (data.status === 'espera') {
            var resumenE = document.getElementById('ov-re-resumen-espera');
            if (resumenE) {
              resumenE.innerHTML = ovReArmarResumen(valores) +
                '<strong>Lista de espera:</strong> #' + data.posicion;
            }
            ovReMostrar('ov-re-estado-espera');

          } else {
            var errMsg = document.getElementById('ov-re-error-msg');
            if (errMsg) errMsg.textContent = data.mensaje || 'Error desconocido.';
            ovReMostrar('ov-re-estado-error');
          }
        })
        .catch(function () {
          var errMsg = document.getElementById('ov-re-error-msg');
          if (errMsg) errMsg.textContent = 'No se pudo conectar. Revisa tu conexión e intenta de nuevo.';
          ovReMostrar('ov-re-estado-error');
        })
        .finally(function () {
          if (btn) btn.disabled = false;
          if (txt) txt.textContent = 'Confirmar registro';
          if (spn) spn.style.display = 'none';
          if (arr) arr.style.display = 'flex';
        });
    });
  }

  // ─── ARRANCAR ─────────────────────────────
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', ovReInit);
  } else {
    ovReInit();
  }

})();
</script>