Как сделать кнопку которая будет давать пользователю скачать файл после подтверждения почты

Есть форма в модальном окне, в ней поле для ввода email и кнопка с надписью "отправить". Необходимо сделать так чтобы, когда пользователь ввел свою почту и нажал на кнопку, должна происходить проверка и если с почтой все окей, кнопка менялась на кнопку с надписью "Скачать" и с иконкой со стрелкой вниз. И после этого пользователь может нажать на кнопку "Скачать" и получить файл, который хранится на сервере. Помогите пожалуйста разобраться, желательно на чистом JS, но можно и на php.

HTML:

    <div class="modal" data-modal="1">
        <div class="modal_window">
            <div class="modal_title">
                Для получения ссылки на скачивание введите адрес своей электронной
                почты
            </div>
            <form action="" class="model_form">
                <input
                    type="email"
                    placeholder="Email"
                    name="email"
                    id="email"
                    class="email_input"
                />
                <div class="btn_and_checkbox">
                    <a class="btn_checkbox" href="ссылка на файл" download=""
                        >Скачать<img src="./img/fi-rs-download.svg" width="24" alt=""
                    /></a>
                    <input type="submit" value="Отправить" class="btn input_btn" />

                    <div class="check">
                        <input
                            type="checkbox"
                            name="check"
                            id="check"
                            checked="checked"
                        />
                        <span>Соглашаюсь с условиями передачи данных</span>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Подложка под модальным окном -->
    <div class="overlay js-overlay-modal"></div>

    <!-- Конец модального окна -->
введите сюда код

JS:

!(function (e) {
    'function' != typeof e.matches &&
        (e.matches =
            e.msMatchesSelector ||
            e.mozMatchesSelector ||
            e.webkitMatchesSelector ||
            function (e) {
                for (
                    var t = this,
                        o = (t.document || t.ownerDocument).querySelectorAll(e),
                        n = 0;
                    o[n] && o[n] !== t;

                )
                    ++n
                return Boolean(o[n])
            }),
        'function' != typeof e.closest &&
            (e.closest = function (e) {
                for (var t = this; t && 1 === t.nodeType; ) {
                    if (t.matches(e)) return t
                    t = t.parentNode
                }
                return null
            })
})(window.Element.prototype)

document.addEventListener('DOMContentLoaded', function () {
    /* Записываем в переменные массив элементов-кнопок и подложку.
      Подложке зададим id, чтобы не влиять на другие элементы с классом overlay*/
    var modalButtons = document.querySelectorAll('.js-open-modal'),
        overlay = document.querySelector('.js-overlay-modal'),
        closeButtons = document.querySelectorAll('.js-modal-close')

    /* Перебираем массив кнопок */
    modalButtons.forEach(function (item) {
        /* Назначаем каждой кнопке обработчик клика */
        item.addEventListener('click', function (e) {
            /* Предотвращаем стандартное действие элемента. Так как кнопку разные
            люди могут сделать по-разному. Кто-то сделает ссылку, кто-то кнопку.
            Нужно подстраховаться. */
            e.preventDefault()

            /* При каждом клике на кнопку мы будем забирать содержимое атрибута data-modal
            и будем искать модальное окно с таким же атрибутом. */
            var modalId = this.getAttribute('data-modal'),
                modalElem = document.querySelector(
                    '.modal[data-modal="' + modalId + '"]'
                )

            /* После того как нашли нужное модальное окно, добавим классы
            подложке и окну чтобы показать их. */
            modalElem.classList.add('active')
            overlay.classList.add('active')
        }) // end click
    }) // end foreach

    closeButtons.forEach(function (item) {
        item.addEventListener('click', function (e) {
            var parentModal = this.closest('.modal')

            parentModal.classList.remove('active')
            overlay.classList.remove('active')
        })
    }) // end foreach

    document.body.addEventListener(
        'keyup',
        function (e) {
            var key = e.keyCode

            if (key == 27) {
                document.querySelector('.modal.active').classList.remove('active')
                document.querySelector('.overlay').classList.remove('active')
            }
        },
        false
    )

    overlay.addEventListener('click', function () {
        document.querySelector('.modal.active').classList.remove('active')
        this.classList.remove('active')
    })
}) // end ready

Вот код и нужно сделать так как на картинке, 1 картинка изначальное значение формы, а 2 после проверки почты. функционал самой формы не нужен, нужно просто чтобы происходила валидация после чего кнопка менялась на другую и можно было по этой кнопке скачать файл.