Primer consejo: ahórrate todos los const formulario = document.getElementById("formulario"). Recuerda que JavaScript crea una propiedad en window (el ámbito global por defecto) con la id de cada elemento del DOM que tenga el atributo id definido. De modo que formulario ya existía antes de que lo declararas.

Segundo consejo: no necesitas JavaScript para comprobar el contenido de un campo mediante expresiones regulares. Basta con usar el atributo pattern y el selector CSS :valid y e :invalid(mira este ejemplo que puse hace pocos días).

Tercer consejo, cuidado con las comprobaciones con conversión de tipos como if (!elementosFormulario[i].value). Además, esa comprobación se hace innecesaria si haces uso del atributo required. Aunque veo que luego pides confirmación para enviarlo aunque estén vacíos, en ese caso puedes mantener la comprobación, pero solo de los campos necesarios mediante una búsqueda querySelectorAll() a través de un atributo inventado o data-* que lo marque como opcional con confirmación.

Cuarto consejo: usa e.preventDefault() solo para evitar el envío del formulario si deseas cancelar el envío. Tú lo estás usando inmediatamente por defecto y luego tratas de enviar el formulario usando el método submit(). Deja que el flujo natural delas cosas fluya hasta que necesites detenerlo.

Te digo lo mismo que @Suso, también me funciona el envío. He editado tu pregunta para que se pueda probar tu código dentro de la pregunta. Podrás comprobar en el inspector de red del navegador que los datos del formulario se envían correctamente codificados como Content-Disposition: form-data (se envía la cabecera Content-Type: multipart/form-data debido a que así lo indicaste en el <form enctype>). Entonces.. ¿tienes una versión en línea para que podamos probar si el problema es algo que no se puede reproducir solo con el código que has compartido?

Hola, en cuanto pueda probaré todo lo comentado por @OscarGarcia. En cuanto a la version en linea aún no hemos subido nada al servidor, pero estamos mirando de hacerlo. Muchas gracias por el tiempo tomado en contestar, a ver si consigo dar con el motivo y a la que podamos, lo subiré también

No entiendo bien el segundo comentario, el primero de @OscarGarcia. hay alguna otra forma de definir un elemento del DOM que no sea con getElement o selectQuery? Creía que era imprescindible para poder trabajar con ellos utilizando un nombre de variable/constante

Y una última cosa, que veo al menos curiosa: si en la ultima función uso el formulario como escuchador del evento ``` formulario.addEventListener("submit", (e) => { ``` refresca la página, entiendo que envía el formulario porque el mensaje en consola es muy rápido, pero no lo inserta en la tabla de pedidos En cambio, si pongo el botón a la escucha, si que inserta el pedido en la tabla, pero no salta el confirm, es como si se pasara el código de la función por alto` ``` enviar.addEventListener("submit", (e) => { ```

@Rastajuan en el primer comentario te indico que el navegador crea automáticamente dichas propiedades en el ámbito de window. Al ser el ámbito global por defecto, las ves en forma de variables normales, pero en realidad todas las variables que crees en el ámbito global son propiedades de la clase window.

Puedes comprobarlo ejecutando este código en la consola de depuración de JavaScript de tu navegador:

pruebas = "Esto es una prueba";
console.log(pruebas, window.pruebas, window["pruebas"]);

@Rastajuan puedes activar en el navegador la opción "mantener registro" para que ni las peticiones de la pestaña de red ni lo que aparece en la consola de depuración de javascript desaparezca cuando cargues una nueva página.

Para saber si de verdad se mandó o no una petición y su contenido, debes hacer uso del inspector de red. Te pongo un ejemplo con tu propio formulario: