JSFiddle - React, Tailwind, and code Playground
HTML
<form class="form" id="free" onsubmit="ga('send', 'event', 'FormMaterFree', 'submit'); yaCounter46324353.reachGoal('free_master'); return true;">
<div class="form__field">
<input class="form__input form__input--fw" type="text" name="name" placeholder="Введите своё имя:">
</div>
<div class="form__field">
<input class="form__input form__input--fw" type="tel" name="phone" required placeholder="+7 (___) ___-____" maxlength="18">
</div>
<div class="form__field form__field--btn">
<button class="btn btn--fw">Вызвать мастера</button>
</div>
</form>
JavaScript
$(document).ready(function () {
$("form").on('submit', function (e) {
e.preventDefault();
// Получение ID формы
var formID = $(this).attr('id');
// Добавление решётки к имени ID
var formNm = $('#' + formID);
if ($(formNm).find('input[type=text]').val() == '' && $(formNm).find('input[type=text]').attr('name') != 'email') {
$(formNm).find('input[type=text]').addClass('fail');
return false;
}else{
$(formNm).find('input[type="text"]').removeClass('fail');
}
if ($(formNm).find('input[type="tel"]').length > 0) {
if ($(formNm).find('input[type="tel"]').val().length != 17) {
$(formNm).find('input[type="tel"]').addClass('fail');
return false;
}else{
$(formNm).find('input[type="tel"]').removeClass('fail');
}
}
if ($(formNm).find('input[name="email"]').length > 0) {
if ($(formNm).find('input[name="email"]').val() == '') {
return false;
}else{
var str = $('.form__input--white').val().trim();
var correct = str.length >= 6 // минимальная длина для точки, собаки, домена + по букве между ними
&& str.includes('@') // есть собака
&& str.includes('.'); // есть точка
if (!correct) {
$('.form__input--white').addClass('error');
return false;
}
}
}
$.ajax({
type: "POST",
url: 'mail.php',
data: formNm.serialize(),
success: function (data) {
// Вывод текста результата отправки
$(formNm).find("input[type=text], input[type=tel], input[type=email]").val("");
$.fancybox.open('<div class="thanks"><h2>Спасибо!</h2><p>Ваша заявка принята и в скором времени с Вами свяжется наш менеджер!</p></div>');
setTimeout(function() {
$.fancybox.close();
}, 2000);
// gtmAjaxSuccess($this);
},
error: function (jqXHR, text, error) {
// Вывод текста ошибки отправки
$.fancybox.open('<div class="thanks"><h2>Ошибка!</h2><p>Попробуйте заполнить форму повторно!</p></div>');
setTimeout(function() {...