Как заставить работать функцию отправки в Javascript?

Что касается валидации:

Вы можете использовать Constrained Validation API (см. MDN), чтобы проверить, все ли поля заполнены. Обычно вы хотите использовать его после того, как пользователь отправил <form>, но до отправки формы на сервер.

Это достижимо, используя его внутри обработчика событий, который вызывается при submit тинге формы.

Что касается обработки событий:

Чтобы реализовать описанный выше механизм, вам нужно добавить прослушиватель событий к событию submit формы через .addEventListener() вместо атрибута onsubmit. Таким образом, вы получите объект event в качестве аргумента функции обработчика событий, с помощью которой вы можете предотвратить отправку формы.

Пример:

const myForm = document.querySelector('form'); // or '#myform', etc...

// define the event handler function
function onFormSubmission(event) {
  const fields = Array.from(event.target.elements);
  const allValid = fields.every(field => field.reportValidity()); 
  if (!allValid) {
    event.preventDefault(); // stop form submission
    return;
  }
  event.target.innerHTML = '<div class = "loading"></div>';
}

// add an event listener that fires on submission
myForm.addEventListener('submit', onFormSubmission);

<form id = "myform" action = "path/to/backend/script.php" method = "POST" enctype = "multipart/formdata" novalidate>
  <input type = "text" name = "foo" placeholder = "I am required!" required>
  <hr>
  <button type = "submit">Submit form</button>
</form>

РЕДАКТИРОВАТЬ

Извините, я пропустил добавление части, которая отображает информацию/элемент загрузки. Добавлено (хотя на самом деле вы его не увидите, потому что, если все обязательные поля заполнены, форма будет отправлена, что приведет к обновлению страницы. Вам понадобится что-то вроде XHR или аналогичного, но это не объем вопроса).