Не работает форма отправки на почту уже на этапе JS
Проблема в том, что даже если *обязательные поля заполнены, всё равно возвращается "заполните обязательные поля". Хотя, по идее, должна крутиться анимация загрузки.
"use strict"
document.addEventListener('DOMContentLoaded', function () {
const form = document.getElementById('form');
form.addEventListener('submit', formSend);
async function formSend(e) {
e.preventDefault();
let error = formValidate(form);
let formData = new FormData(form);
if (error === 0) {
form.classList.add('_sending');
let response = await fetch('sendmail.php', {
method: 'POST',
body: formData
});
if (response.ok) {
let result = await response.json();
alert(result.message);
formPreview.innerHTML = '';
form.reset();
} else {
alert("Ошибка");
}
} else {
alert('Заполните обязательные поля');
}
}
function formValidate(form) {
let error = 0;
let formReq = document.querySelectorAll('._req');
for (let index = 0; index < formReq.length; index++) {
const input = formReq[index];
formRemoveError(input);
if (input.classList.contains('._tel')) {
if (telTest(input)) {
formAddError(input);
error++;
}
} else if (input.value === '') {
formAddError(input);
error++;
}
}
}
function formAddError(input) {
input.parentElement.classList.add('_error');
input.classList.add('_error');
}
function formRemoveError(input) {
input.parentElement.classList.remove('_error');
input.classList.remove('_error');
}
function telTest(input) {
let regex = /^(\+7|7|8)?[\s\-]?\(?[489][0-9]{2}\)?[\s\-]?[0-9]{3}[\s\-]?[0-9]{2}[\s\-]?[0-9]{2}$/;
return regex.test(input.value);
}
});
.contacts {
display: flex;
color: #fff;
position: relative;
&::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(51, 51, 51, 0.9) url("../img/contacts/loading.gif") center / 50px no-repeat;
opacity: 0;
visibility: hidden;
@extend %anim;
}
& ._sending {
&::after {
content: "";
opacity: 1;
visibility: visible;
}
}
& input,
select {
width: 210px;
height: 30px;
}
& textarea {
width: 100%;
height: 100px;
resize: vertical;
}
& input,
select,
textarea {
background: #0572cb;
color: white;
border-bottom: 1px solid white;
padding: 5px;
margin: 0 0 20px;
&::placeholder {
color: white;
opacity: 0.5;
}
}
& input._error,
textarea._error {
box-shadow: 0 0 15px #fd4a35;
}
&__picture {
background: #fbaa6f;
flex: 1 0 50%;
}
& .contact {
background: #0572cb;
flex: 1 0 50%;
position: relative;
padding: 110px 0;
&__text {
& h3 {
font-size: 28px;
margin-bottom: 50px;
position: relative;
&::before {
content: "";
display: inline-block;
background: url("../img/contacts/01.png") 0 0 / auto 100% no-repeat;
//border: 1px dashed #000;
height: 50px;
width: 50px;
position: absolute;
transform: translate(-10px, -60px);
}
}
& span {
display: block;
//width: 432px;
//border: 1px dashed #000;
margin: 0px auto 30px;
}
& h4 {
//border: 1px dashed red;
//width: 432px;
margin: 0 auto 20px;
}
}
&__form {
//border: 1px dashed #000;
//width: 432px;
margin: 80px auto 0;
&_inputs {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
}
}
}
<section id="contacts" class="contacts">
<div class="contacts__picture"></div>
<div class="contact">
<div class="contact__text">
<h3>Меня зовут Ирина Игоревна</h3><span>Записаться на первое занятие, а также задать вопросы по
интересующей Вас
иноформации:</span>
<h4>Контакты</h4><span>+7 (906) 921-11-01</span>
<form action="#" class="contact__form" id="form">
<div class="contact__form_inputs">
<div class="contact__form_input">
<p>Ваше имя*</p>
<input id="formName" tabindex="1" name="name" type="text" class="_req">
</div>
<div class="contact__form_input">
<p>Номер телефона*</p>
<input id="formPhone" tabindex="2" name="phone" type="tel" class="_req _tel">
</div>
<div class="contact__form_input">
<p>Email</p>
<input tabindex="3" name="email" type="text">
</div>
<div class="contact__form_input">
<p>Услуга*</p>
<select tabindex="4" name="service" id="">
<option value="beforeschool">Раннее / Подготовка</option>
<option value="egeoge">ЕГЭ / ОГЭ</option>
<option value="english">Английский</option>
<option value="tutoring">Репетиторство</option>
<option value="prolongation">Продленка</option>
</select>
</div>
</div>
<div class="contact__form_area">
<p>Сообщение*</p>
<textarea
placeholder="Костя, 3 класс, необходимо заполнить пробелы по математике. Занятие в группе, удобно вторник / четверг во второй половине дня."
id="formMessage" tabindex="5" name="message" class="_req"></textarea>
</div>
<div tabindex="6" class="contact__form_btn">
<button class="contact__btn_button" type="submit">Отправить</button>
<!--<div class="contact__btn_thanks"></div>-->
</div>
</form>
</div>
</div>
</section>
Ответы (1 шт):
Автор решения: Андрей Широков
→ Ссылка
Да, причина была в том, что через CSS я не тому элементу задавал класс _sending и забыл в "валидации" вернуть ошибку (return error).