Форма обратной связи с валидацией и активацией кнопки "Скачать"
Все доброго времени суток. Есть такая форма (представлена на картинке №1). Мне нужно сделать так, чтобы когда клиент вводил свой E-mail, Во-первых происходила проверка правильности написания почты, а Во-вторых, после того как клиент нажимает на кнопку "Отправить"(понятное дело, что почта должна быть введена), вместо этой кнопки появлялась кнопка "Скачать" и клиент уже нажимая на нее мог скачать файл, которых лежит в корне папки сайта. Я сделал пока просто верстку, где клиент может ввести все что угодно(или вообще ничего) и нажать на кнопку, чтобы скачать файл и всё.
Подскажите как можно это сделать проще, можно хоть PHP, хоть JS, желательно чистый или небольшую библиотеку использовать. Заранее большое спасибо, а то уже кучу времени на это потратил.
То есть, нужно:
- Валидация одного поля E-mail
- После нажатия на кнопку "Отправить" при верном введённом E-mail появлялась вместо той кнопки, кнопка "Скачать".
Форма, которая сейчас на сайте↓↓↓
Форма, которая нужна(в макете)↓↓↓
Мой код данной формы. Она активируется как модальное окно, при нажатии на кнопку появляется данная форма↓↓↓
!(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@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
* {
margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif;
color: #494049;
}
body {
width: 100%;
height: 100%;
background-color: #fff;
}
a,
ul,
li {
text-decoration: none;
list-style: none;
color: inherit;
}
.btn {
width: 300px;
height: 60px;
background: #226ce6;
border-radius: 4px;
font-size: 20px;
line-height: 24px;
/* identical to box height */
display: flex;
align-items: center;
justify-content: center;
color: #fff;
}
.btn a {
width: 100%;
height: 100%;
display: grid;
justify-content: center;
align-content: center;
}
.btn_checkbox {
min-width: 314px;
height: 65px;
background-color: #226ce6;
color: #fff;
border-radius: 4px;
display: flex;
justify-content: center;
align-items: center;
font-weight: 500;
font-size: 20px;
line-height: 24px;
gap: 10px;
}
/* Стили для подложки */
.overlay {
/* Скрываем подложку */
opacity: 0;
visibility: hidden;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(70, 70, 72, 0.5);
z-index: 20;
transition: 0.3s all;
}
/* Стили для модальных окон */
.modal {
/* Скрываем окна */
opacity: 0;
visibility: hidden;
/* Установаем ширину окна */
max-width: 502px;
max-height: 450px;
/* Центрируем и задаем z-index */
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* z-index: 30; */
/* Должен быть выше чем у подложки */
/* position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center; */
z-index: 30;
/* Побочные стили */
/* box-shadow: 0 3px 10px -0.5px rgba(0, 0, 0, 0.2);
text-align: center;
padding: 30px;
border-radius: 3px;
background-color: #fff; */
transition: 0.3s all;
}
/* Стили для активных классов подложки и окна */
.modal.active,
.overlay.active {
opacity: 1;
visibility: visible;
}
.modal_window {
position: relative;
z-index: 30;
max-width: 502px;
max-height: 450px;
padding: 60px 94px;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
flex-direction: column;
gap: 35px;
}
.modal_title {
font-weight: 600;
font-size: 21px;
line-height: 143%;
max-width: 314px;
}
.model_form {
display: flex;
justify-content: center;
align-items: center;
gap: 35px;
flex-direction: column;
}
.email_input {
width: 314px;
height: 60px;
background: #f2f6fa;
box-shadow: inset 0px 2px 8px rgba(199, 196, 196, 0.25);
border-radius: 4px;
border: none;
display: flex;
align-items: center;
box-sizing: border-box;
padding: 0 15px;
font-size: 15px;
line-height: 160%;
font-family: inherit;
}
.email_input:active,
.email_input:focus {
outline-color: #226ce6;
}
.btn_and_checkbox {
display: flex;
justify-content: center;
align-items: center;
gap: 25px;
flex-direction: column;
}
.input_btn {
border: none;
display: none;
}
.check {
font-size: 11px;
line-height: 15px;
display: flex;
align-content: center;
gap: 10px;
align-self: flex-start;
}
.check>input:focus,
.check>input:active {
outline-color: #226ce6;
}<!-- Модальных окон -->
<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" pattern="/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/" required />
<div class="btn_and_checkbox">
<a class="btn_checkbox" href="./file.zip" 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>
<!-- Конец модального окна -->
<!-- Кнопка открытия модального окна -->
<div class="btn down_btn">
<a href="#" class="js-open-modal btn" data-modal="1">
Скачать <img src="./img/fi-rs-download.svg" alt=""
/></a>
</div>Источник: Stack Overflow на русском