DjonyBastone,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://jqueryvalidation.org/files/dist/jquery.validate.js"></script>
<link rel="stylesheet" type="text/css" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css">
<script type='text/javascript' src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
<script>
$(function() {
$.validator.setDefaults({
submitHandler: function () {
alert("Всё ок!");
}
});
$.validator.addMethod("always", function (value, element) {
return $('[name="email"]').val().trim()||$('[name="tel"]').val().trim()
},
"email или телефон нужно заполнить")
$(".validate").validate({
rules: {
consent : {required: true},
tel: {always: true},
email: {always: true}
},
messages: {
consent : {
required: function () {
$.fancybox($(".hot"));
}
}
}
})
});
</script>
</head>
<body>
<form action="form.php" class="validate" >
<h3>Заказать консультацию <span>специалиста</span></h3>
<p>Оставьте контактные данные и в течении 5 минут вам перезвонит опытный специалист!</p>
<div class="wrap_input">
<input type="text" name="name" placeholder="Введите Ваше имя" required >
<i class="fa fa-user" aria-hidden="true"></i>
</div>
<div class="wrap_input">
<input type="email" name="email" placeholder="Введите Ваш email">
<i class="fa fa-phone" aria-hidden="true"></i>
</div>
<div class="wrap_input">
<input type="tel" name="tel" placeholder="Введите Ваш телефон">
<i class="fa fa-phone" aria-hidden="true"></i>
</div>
<div class="form__checkbox">
<label for="form__checkbox">
<span>
<input id="form__checkbox" title="Нужно принять соглашение" name="consent" type="checkbox" checked>
<i></i>
</span>
<a href="#consent_form" class="popup consent">Нажимая кнопку «Получить консультацию», я даю свое согласие на обработку моих персональных данных, в соответствии с Федеральным законом от 27.07.2006 года №152-ФЗ «О персональных данных», на условиях и для целей, определенных в Согласии на обработку персональных данных</a>
</label>
</div>
<button type="submit" class="red_btn">получить консультацию</button>
</form>
<style type="text/css">
.hot{
border: 1px dashed Gray; padding: 5px; height: 100px; width: 100px; display: none;
}
</style>
<div class="hot">Нужно принять соглашение</div>
</body>
</html>