<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<link rel="stylesheet" href="test.css">
<link rel="stylesheet" href="http://farpotolok.ru/css/jquery.fancybox-min.css" type="text/css" media="screen" />
<script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.js"></script>
<script type='text/javascript' src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
<script>
$(document).ready(function () {
$(".fancybox_close").on("click", function() {
$.fancybox.close()
});
$("#consent").fancybox({
margin: [40, 45, 40, 45],
helpers: {
media: {},
overlay: {}
},
scrollOutside: true
});
$('.submit_form').click(function(){
$('.form__checkbox_input').prop('checked', true);
$.fancybox({
href: "#accept",
margin: [40, 45, 40, 45],
helpers: {
overlay: {}
}
});
});
$('.no-submit_form').click(function(){
$('.form__checkbox_input').prop('checked', false);
$.fancybox({
href: "#no_accept",
margin: [40, 45, 40, 45],
helpers: {
overlay: {}
}
});
});
$(function() {
$.validator.setDefaults({
submitHandler: function () {
alert("Всё ок!");
}
});
$.validator.addMethod('always', function (value, element) {
return $('[name="email"]').val().trim()||$('[name="tel"]').val().trim()
}, 'Необходимо ввести E-mail или телефон');
$("#validate1").validate({
rules: {
name: {required: true},
tel: {
always: true
},
email: {
always: true,
email: true
},
consent : {required: true}
},
messages: {
name: {
required: 'Поле Имя обязательно к заполнению'
},
email: {
email: 'Необходимо ввести правильный E-mail'
},
consent : {
required: function () {
$.fancybox({
href: "#consent_form",
margin: [40, 45, 40, 45],
helpers: {
media: {},
overlay: {}
},
scrollOutside: true
});
}
}
},
success: "vse-ok",
highlight: function(element, errorClass) {
$(element).parent().addClass('error');
},
unhighlight: function(element, errorClass, validClass) {
$(element).parent().removeClass('error');
}
});
});
$(function() {
$.validator.setDefaults({
submitHandler: function () {
alert("Всё ок!");
}
});
$.validator.addMethod('always', function (value, element) {
return $('[name="email"]').val().trim()||$('[name="tel"]').val().trim()
}, 'Необходимо ввести E-mail или телефон');
$("#validate2").validate({
rules: {
name: {required: true},
tel: {
always: true
},
email: {
always: true,
email: true
},
consent : {required: true}
},
messages: {
name: {
required: 'Поле Имя обязательно к заполнению'
},
email: {
email: 'Необходимо ввести правильный E-mail'
},
consent : {
required: function () {
$.fancybox({
href: "#consent_form",
margin: [40, 45, 40, 45],
helpers: {
media: {},
overlay: {}
},
scrollOutside: true
});
}
}
},
success: "vse-ok",
highlight: function(element, errorClass) {
$(element).parent().addClass('error');
},
unhighlight: function(element, errorClass, validClass) {
$(element).parent().removeClass('error');
}
});
});
})
</script>
</head>
<body>
<form id="validate1" action="" method="post" 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 class="contact_group" type="email" name="email" placeholder="Введите Ваш email">
<i class="fa fa-phone" aria-hidden="true"></i>
</div>
<div class="wrap_input">
<input class="contact_group" 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" class="popup consent">Нажимая кнопку «Получить консультацию», тро-ло-ло</a>
</label>
</div>
<button type="submit" class="red_btn">получить консультацию</button>
</form>
<form id="validate2" action="" method="post" 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 class="contact_group" type="email" name="email" placeholder="Введите Ваш email">
<i class="fa fa-phone" aria-hidden="true"></i>
</div>
<div class="wrap_input">
<input class="contact_group" 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" class="popup consent">Нажимая кнопку «Получить консультацию», тро-ло-ло</a>
</label>
</div>
<button type="submit" class="red_btn">получить консультацию</button>
</form>
<div style="display: none">
<div id="thanks" class="popup">
<form>
<p>Данные отправлены.
<br>С вами кое-кто свяжется!</p>
<a href="#" class="fancybox_close">Вернуться на сайт</a>
</form>
</div>
</div>
<div style="display: none">
<div id="accept" class="popup">
<form>
<h3>Соглашение принято!</h3>
<h4>Заполните и отправьте данные!</h4>
<a href="#" class="fancybox_close">Вернуться на сайт к запонению</a>
</form>
</div>
</div>
<div style="display: none">
<div id="no_accept" class="popup popup__after">
<h3>Соглашение не принято!</h3>
<p>Это зря</p>
<a href="#" class="fancybox_close">Вернуться на сайт</a>
</div>
</div>
<div style="display: none">
<div id="consent_form" class="consent__popup consent__popup_form">
<div class="consent__popup consent__popup_text">
<h3>Согласие на обработку персональных данных:</h3>
<p>Tro-lo-lo</p>
</div>
<div class="consent__popup_btn">
<button class="consent__popup_btn1 submit_form blue_btn">Принимаю</button>
<button class="consent__popup_btn1 no-submit_form red_btn">Не принимаю</button>
</div>
</div>
</div>
<div style="display: none">
<div id="consent" class="consent_list consent__popup consent__popup_text">
<h3>Согласие на обработку персональных данных:</h3>
<p>Tro-lo-lo</p>
</div>
</div>
</body>
</html>