Не работает валидация номера телефона в JavaScript. Делал по аналогии с валидацией email
JavaScript
"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();
form.classList.remove('_sending');
} else {
alert("Ошибка");
form.classList.remove('_sending');
}
} 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++;
}
}
}
return 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);
}
});
HTML
<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>