Javascript-форум - 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(); }); })(); });

Всем привет

Форма с соглашением (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} - Эта проверка не работает, форма все равно отправляет данные

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