Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #21 (permalink)  
Старый 31.07.2017, 14:30
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,124

DjonyBastone,
'always' надо переделывать для начала
Ответить с цитированием
  #22 (permalink)  
Старый 31.07.2017, 14:45
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,124

Сообщение от DjonyBastone
когда нажимаю кнопку принять соглашение, должен отметится чек-бокс
Сообщение от DjonyBastone
$('.form__checkbox_input')
убрать красное строки 27 и 38
Ответить с цитированием
  #23 (permalink)  
Старый 31.07.2017, 15:00
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,124

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>
Ответить с цитированием
  #24 (permalink)  
Старый 31.07.2017, 20:45
Интересующийся
Отправить личное сообщение для DjonyBastone Посмотреть профиль Найти все сообщения от DjonyBastone
 
Регистрация: 20.07.2017
Сообщений: 10

То что надо!
'this.currentForm' - даже не знал!! Спасибо
Пробовал - '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
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Валидация формы работает не совсем так Batyabest Events/DOM/Window 12 26.11.2016 02:07
Валидация формы vierhein jQuery 0 28.02.2014 16:40
Валидация формы в зависимости от значения radio batton housewm Events/DOM/Window 1 10.01.2014 18:46
Валидация формы Ваяс Элементы интерфейса 8 11.07.2012 15:20
Валидация формы dmsuslov jQuery 4 05.11.2010 16:12