El siguiente formulario no envía (submit POST) y debería usar class para el button y el form en vez de id, porque hay varios button y varios form. Estuve probando querySelector(); querySelectorAll(); getElementsByClassName(); pero no logro hacerlo funcionar.

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.css" type="text/css">
    
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.js"></script>
    
    <form method="post" action="/post.php" enctype="multipart/form-data" id="form" novalidate>
    <p>Nombre:</p>
    <input name="nombre" type="text" class="form-control" required>
    <button id="btnA" type="submit" id="boton" class="btn-success" >Enviar</button>
    </form>
    
    <script>
    window.addEventListener('DOMContentLoaded', Init); 
    
    function Init(){ //se ejecuta cuando el DOM ha sido cargado
      const form = document.getElementById('form'); //no hay un solo form, por lo tanto es necesario ocupar querySelectorAll
      form.addEventListener('submit', event => {
       event.preventDefault();
          if (!form.checkValidity()) { //Si el form tiene errores
            event.preventDefault(); //detenemos el submit
            event.stopPropagation();
            form.classList.add('was-validated'); // agregamos la clase para que muestre la alerta con errores
            return; //retornamos
          }
          
          //Aqui sigue si es que no hay errores en el form
          form.querySelectorAll("input, button, select").forEach(el => el.disabled=true); //desabilitamos todos los inputm buttons y select del form
          document.getElementById("btnA").innerHTML='<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Espere...'; //agregamos este spinner al boton submit
    
        }, false)
    }
    </script>