Как валидировать форму для скачивания файла с минимумом JS?

Question

[It]

Коллеги, доброго дня.
Появилась задачка, есть форма для скачивания файла с обязательными полями. Как только форма заполнена правильно, то при нажатии на Download контакты должны улететь на почту маркетингу и появится окно выбора места для сохранения файла.
Собственно думаю как это всё реализовать с минимальным использованием JS т.к. та же валидация полей хоть и на примитивном уровне самим html отлично сделана через required.
Бэк на node написан (nodemailer).
Собственно вопросы:
1. Как правильно реализовать отправку контактов по нажатию и одновременно (для пользователя) старт скачивания файла?
Тут хотелось бы понимать какими элементами сделать type="submit" у формы (button, input, a, может 'a' в button и т.п.) и какие события куда навесить. Как стилизовать неактивность кнопки тоже не совсем понятно, button имеет атрибут disabled, пробовал через него, но это работает только если всё навешивать на button, а если внутри 'a', то скачивание начинается все равно.
2. Как правильно сделать редирект на thank-you-page после успешной отправки контактов? Обычный метод через onclick="window.location.href", но вот с учетом скачиваний че-то как-то сложно. С нодой не дружу пока что, поэтому need some help.

По отдельности это всё делается просто, а совместить правильно че-то какой-то затык.
Если у кого есть кусок готового кода, то буду мега благодарен, если нет, то и просто описания алгоритма будет достаточно.

Answer 1

[EVG]

1. Используйте input[type=submit]/button[type=submit]
2. Подпишитесь на событие submit на форме
3. В обработчике события запускайте загрузку файла с помощью примерно такой функции

// https://stackoverflow.com/questions/3916191/download-data-url-file/45905238#45905238?newreg=ddb3c48865d04c319b39f772df762521
function download(dataurl, filename) {
  var a = document.createElement("a");
  a.href = dataurl;
  a.setAttribute("download", filename);
  a.click();
}

3. Что касается невозможности нажатия на кнопку сабмита, если хоть одно поле формы не валидно, то навешайте примерно такой стиль:

#someform:invalid [type=submit]{
  pointer-events: none;
  
  /* другие нужные стили, да хоть display: none; */
}

4. Если редирект хотите выполнять на бэке, тот здесь проблем нет - просто перенаправляйте в бэковом обработчике формы. Если будете редиректить клиентом, то в обработчике сабмита отмените дефолтовую реакцию на ивент, с формы соберите данные и пошлите AJAX-ом на бэк, и затем делейте редирект на сэнкью-пейдж, если данные отправились успешно.