Javascript-форум - validation - Валидация формы

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - validation - Валидация формы (https://javascript.ru/forum/dom-window/66845-validation-validaciya-formy.html)

validation - Валидация формы

Валидация формы
Здравствуйте. Подскажите, пожалуйста, что в данном случае я делаю не так. Строки кода, которые не работают, я выделил комментариями.

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<title>form</title>
	<link rel="stylesheet" href="css/normalize.css">
	<link rel="stylesheet" href="css/main.css">
</head>
<body>
	<form class="form1">
		email: <input class="val__input_fname" type="text" name="email" value="email" /> <br />
	
		<input type="submit" />
	</form>

<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>

$(document).ready(function() {
	(function() {

		var 
			form = $("form.form1"),
			input__fname = $('input.val__input_fname');


		function validate(elem, pattern) {
		    var res = elem.val().search(pattern);

		    if ( res == -1 ) {
		    	elem.addClass("invalid", function() {
		    		$(this).removeClass("valid");
		    	});
		    }
		    else {
		    	elem.addClass("valid", function() {
	    			$(this).removeClass("invalid");
		    	});
		    }
		}
			
		function nameOnChange() {
			var pattern = /\b[a-z0-9._]+@[a-z0-9.-]+\.[a-z]{2,4}\b/i;

    		validate(input__fname, pattern);
		}

		input__fname.on('change', function() {
			nameOnChange();
		});

		function onsubmiHandler() {

			var  invalid = false;

			input__fname.trigger('change'); // не работает
			
			if ( input__fname.hasClass('invalid') ) {
				invalid = true;
			}

			if ( invalid ) {
				
				alert("Допущены ошибки при заполнении формы.");

				return false; // не работает
			}
		}

		form.on('submit', function() {
			onsubmiHandler();
		});
	})();
});

s24344,
а где 15 строка???

Не отрабатывает: return false // отмена submit

s24344,
строка 53

return onsubmiHandler();

s24344,
и на всякий случай про true не забудьте в onsubmiHandler

Валидация с логикой

Всем привет

Форма с соглашением (checkbox)
html:

<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>

Существующая валидация:

$(".validate").each(function() {
        var it = $(this);
        it.validate({
            rules: {
                tel: {required: true},
                email: {required: true},
                consent : {required: true}
            },
            messages: {},
            errorPlacement: function(error, element) {},
            submitHandler: function(form) {
                var thisForm = $(form);

                $.ajax({
                    type: "POST",
                    url: thisForm.attr("action"),
                    data: thisForm.serialize()
                }).done(function() {
                    $.fancybox({
                        href: '#thanks',
                        wrapCSS: "popup",
                        openEffect: "fade",
                        closeEffect: "fade",
                        helpers: {
                            overlay: {
                                locked: false
                            }
                        }
                    });
                    thisForm.find("input:not([type=hidden], [type=radio])").val("");
                });
                return false;
            },
            success: function() {},
            highlight: function(element, errorClass) {
                $(element).parent().addClass('error');
            },
            unhighlight: function(element, errorClass, validClass) {
                $(element).parent().removeClass('error');
            }
        })
    });

Планируется:

Обязательный к заполнению - телефон или емейл, Но можно и оба отправить
Если чек бокс отмечен - отправляем форму
Если чек бокс не отмечен - вызываем лист соглашения (fancybox, а в нем текст и 2 кнопки - принять/не принять).
Лист соглашения - при приеме соглашения форма с веденными ранее данными отправляется. Если не соглашается - делаем выход из соглашения и закрываем всё (fancybox.close)

Помогите пожалуйста с реализацией, нет ни кого рядом кто опытом может поделиться.

P.S. consent : {required: true} - Эта проверка не работает, форма все равно отправляет данные

Народ, помогите пожалуйста разобраться. Без помощи ни как

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}
         }
     })
});
  </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>


</body>
</html>

Спасибо, 1 пункт вопроса решен. Это очень хорошо:)

Остались пункты с чек-боксами - 2, 3, 4 :help:

DjonyBastone,
2 решено
3 решено без fancybox
4 нет необходимости

Цитата:

Сообщение от рони (Сообщение 459134)

DjonyBastone,
2 решено
3 решено без fancybox
4 нет необходимости

Пункт 2:

В вашем примере тестировал (здесь на сайте в сообщении)

Если ввожу имя и мейл, выключил чек-бокс и нажал кнопку отправить. И всё пропадает - как будто форма совершила submit

У себя в проекте форма тоже отправляет данные.

Напрашивается вопрос - А вообще верно ли указана проверка на чек-бокс? consent : {required: true}
По умолчанию в html атрибут поставлен - checked. Может он по умолчанию считает валидным чек-бокс.

Поясните пожалуйста, если я не прав

Цитата:

Сообщение от DjonyBastone

атрибут поставлен - checkedМожет он по умолчанию считает валидным чек-бокс.

да-- если галочки не будет --- будет сообщение из содержимого title, этого поля "Нужно принять соглашение"

Цитата:

Сообщение от DjonyBastone

Если ввожу имя и мейл, выключил чек-бокс и нажал кнопку отправить. И всё пропадает

скорее всего у вас в коде ошибка и валидация отсутствует

CSS ломает скрипт

Нашел ошибку.

В CSS чек-бокс был скрыт

Код:

.form__checkbox input {

    display: none; 

}

в первые встречается такое поведение

А как вызвать модальное окно с соглашением?

Код:

messages: {

                   

                    consent : {

                        required: function () {

                            alert('Надо вызвать fancybox')

                        }

                    }

                }

Полагаю что нужно вместо alert - вставить вызов

Только вызов всплывающего окна не получается

Пробовал:
и функцию с методом fancybox
и имитацию клика по ссылке

подскажите пожалуйста

Цитата:

Сообщение от DjonyBastone

вместо alert - вставить вызов

$.fancybox.open('<p>Надо вызвать fancybox</p>')

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>

Рони, спасибо большое!!

Кому потребуется - решение по валидации нескольких форм, одним способом.

var validate1 = {
        rules: {
            name: {required: true},
            tel: {always: true},
            email: {
                always: true,
                email: true
            },
            consent : {required: true}
        },
        messages: {
            name: {
                required: 'Поле Имя обязательно к заполнению'
            },
            tel: {
                always: 'Необходимо ввести E-mail или телефон'
            },
            email: {
                always: 'Необходимо ввести E-mail или телефон',
                email: 'Необходимо ввести правильный E-mail'

            },
            consent : {
                required: function () {
                    $.fancybox({
                        href: "#consent_form",
                        margin: [40, 45, 40, 45],
                        helpers: {
                            media: {},
                            overlay: {}
                        },
                        scrollOutside: true
                    });
                }
            }
        },
        errorPlacement: function(error, element) {},
        success: function() {},
        highlight: function(element, errorClass) {
            $(element).parent().addClass('error');
        },
        unhighlight: function(element, errorClass, validClass) {
            $(element).parent().removeClass('error');
        }

    };

    $(".validate1").validate(validate1);

    $(".validate2").validate(validate1);

    $(".validate_cons").validate(validate1);

А теперь 2 формы на странице

<!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>

Помогите пожалуйста с формами.

Помогите пожалуйста с формами.

Уже по всякому извращался, не робит как надо.

Суть проблемы:

Первая форма емейл/телефон проверяет нормально. Когда дело доходит до второй формы, метод проверки как будто ломается. Номер телефона правильно набираю, но валидация не проходит.
Снимаю галку с чек-бокса, нажимаю кнопку получить консультацию, всплывает окно - это работает, но когда нажимаю кнопку принять соглашение, должен отметится чек-бокс. Через раз отмечается. после этой процедуры пытаюсь снять/поставить галку - снова всплывает форма, а этого уже не должно быть.

P.S. Подскажите в каком виде нужно вставить код, что бы он был исполняемый?

DjonyBastone,
'always' надо переделывать для начала

Цитата:

Сообщение от DjonyBastone

когда нажимаю кнопку принять соглашение, должен отметится чек-бокс

Цитата:

Сообщение от DjonyBastone

$('.form__checkbox_input')

убрать красное строки 27 и 38

DjonyBastone,
новый always строка 48, дублировать не нужно.
исправлен путь к checkbox.

<!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: {}
                }
            });
        });

       $.validator.addMethod('always', function (value, element) {
                return  $('[name="email"]', this.currentForm).val().trim()||$('[name="tel"]',this.currentForm).val().trim()
            }, 'Необходимо ввести E-mail или телефон');

        $(function() {
            $.validator.setDefaults({
                submitHandler: function () {
                    alert("Всё ок!");
                }
            });



            $("#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("Всё ок!");
                }
            });



            $("#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>

То что надо!

'this.currentForm' - даже не знал!! Спасибо:victory:
Пробовал - 'this.form'

Для оформительской части скрипта добавил свойство validation:

errorPlacement: function(error, element) {
        if (element.attr("name") == "name") error.insertAfter($("input[name=name]"));
        if (element.attr("name") == "email") error.insertAfter($("input[name=email]"));
        if (element.attr("name") == "tel") error.insertAfter($("input[name=tel]"));
    }

Иначе по умолчанию для чек-бокс появляется нежелательный label