Как добавить уведомление к проверке чекбоксов?

Question

[twwebrus]

Доброго времени суток!
На сайте имеется форма обратной связи с чекбоксом (соглашение).
Если ввести данные в поля и не нажать на галочку - для пользователя ничего не происходит. В консоли браузера ошибка - 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 = "[e-mail]";

$tema = "Сообщение с сайта";
$message_to_myemail = "Свяжитесь со мной:
<br><br>
Телефон: $phone<br>
Источник (ссылка): $refferer";

mail($myemail, $tema, $message_to_myemail, "From: Sitename <[e-mail]> \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); 
				}
			});
		}
	});

Comments

[Сергей delphinpro]

Вопрос в следующем - как можно добавить явное предупреждение для пользователя о том, что необходимо поставить галочку?

Так-то все очень просто

var cb = … ; // получаем ссылку на элемент любым способом
if (!cb.checked) {
  alert ('Отметь чекбокс, редиска!!!')
}

Answer 1

[Roman Sokolov]

Блокировать кнопку отправки пока не будет поставлена галочка.
Пример

Comments

[twwebrus]

К сожалению кнопка изначально не блокируется. Если к примеру поставить галочку и убрать - то заблокируется

[Roman Sokolov]

twwebrus, состояние блокировки можно задавать при загрузке страницы. Ниже ответили, что можно изначально задать disabled, например, в аттрибуте кнопки.
jsfiddle.net/n9z5D/5420

[Сергей delphinpro]

Крайне нехорошее решение с точки зрения UX.
Хотя признаю, часто приходится так делать по требованию свыше.

Дело в том, что кнопка заблокирована и пользователь может не понять почему она заблокирована. А если кнопка доступна, и по нажатию происходит какое-то действие — уведомление об ошибке заполнения, то тут намного проще понимать что происходит.

Answer 2

[Вячеслав Успенский]

Поставьте кнопке submit по умолчанию disabled и снимайте скриптом. А чекбоксу поставьте required. Впринципе достаточно второго.