Доброго времени суток!
На сайте имеется форма обратной связи с чекбоксом (соглашение).
Если ввести данные в поля и не нажать на галочку - для пользователя ничего не происходит. В консоли браузера ошибка - An invalid form control with name='check' is not focusable. Соответственно если поставить галочку форма работает исправно.
Вопрос в следующем - как можно добавить явное предупреждение для пользователя о том, что необходимо поставить галочку? Так же по какой-то причине не работает этот участок в JS -
else if(!(reg.test(phone))) err = 'Ошибка ввода данных';<form action="success.php" class="contact-form" method="post">
<div class="contact-form__wrap bg-1">
<input type="text" class="tel" name="phone" placeholder="Ваш номер телефона" required>
<button data-submit name="send" class="btn">Подать заявку</button>
</div>
<label class="checkobx-wrap d-flex">
<input type="checkbox" name="check" class="checkbox" required>
<span class="checkbox-custom"></span>
<span class="label">
Согласен на обработку персональных данных <span>и соглашаюсь c политикой конфиденциальности</span>
</span>
</label>
</form>
<?php
header("Content-Type: text/html; charset=utf-8");
$phone = htmlspecialchars($_POST["phone"]);
$refferer = getenv('HTTP_REFERER');
$date=date("d.m.y");
$time=date("H:i");
$myemail = "project@tw.ru";
$tema = "Сообщение с сайта";
$message_to_myemail = "Свяжитесь со мной:
<br><br>
Телефон: $phone<br>
Источник (ссылка): $refferer";
mail($myemail, $tema, $message_to_myemail, "From: Sitename <project@tw.ru> \r\n Reply-To: Sitename \r\n"."MIME-Version: 1.0\r\n"."Content-type: text/html; charset=utf-8\r\n" );
?>
$('form').submit(function(e) {
e.preventDefault();
var err = false;
var form = $(this);
var phone = form.find('.tel').val();
var reg = /^((\+?7|8)[ \-]?)?((\(\d{3}\))|(\d{3}))?([ \-])?(\d{3}[\- ]?\d{2}[\- ]?\d{2})$/;
if(phone.length < 1) err = 'Это обязательное поле';
else if(!(reg.test(phone))) err = 'Ошибка ввода данных';
if(err) {
form.find('.input-error').html(err);
form.find('.tel').css('box-shadow', 'inset 0 0 0 1px #fd9595');
form.find('.contact-form__wrap').removeClass('bg-1').addClass('bg-2');
return false;
}else {
form.css('opacity', 0);
var load = form.parent('.questions__wrap').children('.loader');
var success = form.parent('.questions__wrap').children('.success');
load.css('opacity', 1);
$.ajax({
type: 'POST',
url: form.attr('action'),
data: form.serialize(),
success: function(){
setTimeout(function() {
form.find('.tel').css('box-shadow', 'inset 0 0 0 1px #b0afaf');
load.css("opacity", 0);
success.animate({opacity: 1}, 200);
setTimeout(function() {
success.css('opacity', 0);
form.get(0).reset();
form.animate({opacity: 1}, 600);
form.find('.contact-form__wrap').removeClass('bg-2').addClass('bg-1');
}, 4000);
}, 1500);
}
});
}
});
