Не могу подключить валидацию форм

65
01 октября 2021, 06:10

Появляется много ошибок и при нажатии на кнопку добавляется +1 ошибка

<script src="js/jquery-3.4.1.min.js"></script>
    <script>
    $(document).ready(function() {
        $(".scroll").on("click", "a", function(event) {
            event.preventDefault();
            let id = $(this).attr('href')
            let top = $(id).offset().top;
            console.log(top);
            $('body,html').animate({
                scrollTop: top
            }, 500);
        });
        $('.p-request-btn').click(function() {
            $('.parents').fadeIn('slow');
            $('.p-request-form').fadeIn('slow');
            $('body').css('overflow', 'hidden');
        });
        $('.parents').click(function() {
            $('.parents').fadeOut('slow');
            $('.p-request-form').fadeOut('slow');
            $('body').css('overflow', '');
        });
    });
    </script>
    <script>
    $(document).ready(function() {
        $(".scroll").on("click", "a", function(event) {
            event.preventDefault();
            let id = $(this).attr('href')
            let top = $(id).offset().top - 90;
            console.log(top);
            $('body,html').animate({
                scrollTop: top
            }, 500);
        });
        $('.p-docs-btn').click(function() {
            $('.parents').fadeIn('slow');
            $('.docs-form').fadeIn('slow');
            $('body').css('overflow', 'hidden');
        });
        $('.parents').click(function() {
            $('.parents').fadeOut('slow');
            $('.docs-form').fadeOut('slow');
            $('body').css('overflow', '');
        });
    });
    </script>
    <script>
    $(document).ready(function() {
        $(".scroll").on("click", "a", function(event) {
            event.preventDefault();
            let id = $(this).attr('href')
            let top = $(id).offset().top - 90;
            console.log(top);
            $('body,html').animate({
                scrollTop: top
            }, 500);
        });
        $('.p-registration-btn').click(function() {
            $('.parents').fadeIn('slow');
            $('.registration-form').fadeIn('slow');
            $('body').css('overflow', 'hidden');
        });
        $('.parents').click(function() {
            $('.parents').fadeOut('slow');
            $('.registration-form').fadeOut('slow');
            $('body').css('overflow', '');
        });
    });
    </script>
    <!-- Валидация форм -->
    <script>
    $(document).ready(function() {
        $("#docs_form").validate({
            rules: {
                name:{
                    required: true,
                    minlength: 2
                },
                email:{
                    required: true,
                    email: true
                },
                phone: {
                    required: true
                }
            },
            errorElement: "em",
            errorClass: "docs_invalid",
            messages: {
                name:{
                    required: "Укажите имя",
                    minlength: jQuery.validator.format("Еще {0} символа")
                },
                email: "Введите email",
                phone: {
                    required: "Укажите телефон",
                    phone: "Заполните поле"
                }
            }
        });
        $("#p_request_form").validate({
            rules: {
                name:{
                    required: true,
                    minlength: 2
                },
                email:{
                    required: true,
                    email: true
                },
                phone: {
                    required: true
                }
            },
            errorElement: "em",
            errorClass: "p_request_invalid",
            messages: {
                name:{
                    required: "Укажите имя",
                    minlength: jQuery.validator.format("Еще {0} символа")
                },
                email: "Введите email",
                phone: {
                    required: "Укажите телефон",
                    phone: "Заполните поле"
                }
            }
        });
        $("#registration_form").validate({
            rules: {
                name:{
                    required: true,
                    minlength: 2
                },
                email:{
                    required: true,
                    email: true
                },
                phone: {
                    required: true
                }
            },
            errorElement: "em",
            errorClass: "registration_invalid",
            messages: {
                name:{
                    required: "Укажите имя",
                    minlength: jQuery.validator.format("Еще {0} символа")
                },
                email: "Введите email",
                phone: {
                    required: "Укажите телефон",
                    phone: "Заполните поле"
                }
            }
        });
        $("#send_request_form2").validate({
            rules: {
                name:{
                    required: true,
                    minlength: 2
                },
                phone: {
                    required: true
                }
            },
            errorElement: "em",
            errorClass: "send_request_invalid",
            messages: {
                name:{
                    required: "Укажите имя",
                    minlength: jQuery.validator.format("Еще {0} символа")
                },
                phone: {
                    required: "Укажите телефон",
                    phone: "Заполните поле"
                }
            }
        });
    });
    /* Маска для телефона */
    $(".phone").mask("+7 (999) 999-99-99");
    </script>   
    <!-- Форма на получение докуметов -->
    <form id="docs_form" class="adaptive-form docs-form">
        <div class="form-header-image">
            <img class="pdf-img" src='img/pdf.png'>
            <button class="modal-dialog__close" id="close" rel="modal:close">×</button>
        </div>
        <div class="content-aligment">
            <div class="form-header" style="font-size: 24px;">
                Получить перечень документов для регистрации вашего оборудования
            </div>
            <div class="form-text">Мы отправим вам .pdf файл со всей необходимой информацией на почту</div>
            <div class="form-item">
                <input type="text" name="name" placeholder="Ваше Имя"><br />
            </div>
            <div class="form-item">
                <input type="email" name="email" placeholder="Ваш email"><br />
            </div>
            <div class="form-item">
                <input type="tel" name="phone" placeholder="Ваш телефон" class="phone"><br />
            </div>
            <button class="btn-hover btn-send color-3" style="width: 100%">ПОЛУЧИТЬ</button>
        </div>
    </form>
    <!-- Форма заявки на регистрацию -->
    <form id="p_request_form" class="adaptive-form p-request-form">
        <div class="content-aligment" style="height: auto;">
                <button class="content-aligment__close modal-dialog__close" id="close" rel="modal:close">×</button>
            <div class="form-header">
                Заявка на регистрацию медоборудования.
            </div>
            <div class="form-text">Вы получите подробную первичную консультацию <b>бесплатно</b>, для уточнения Ваших целей, задач и подбора оптимального пути для получения РУ. Наш эксперт ответит на все интересующие Вас вопросы.</div>
            <div class="form-item">
                <input type="text" name="name" placeholder="Ваше Имя">
            </div>
            <div class="form-item">
                <input type="email" name="email" placeholder="Ваш email">
            </div>
            <div class="form-item">
                <input type="tel" name="phone" placeholder="Ваш телефон" class="phone">
            </div>
            <button class="btn-hover btn-send color-3" style="width: 100%">Получить бесплатную консультацию</button>
        </div>
    </form>
    <!-- Форма на регистрацию -->
    <form id="registration_form" class="adaptive-form registration-form">
        <div class="form-header-image">
            <img class="pdf-img" id="button" src='img/register_button_form.jpg'>
            <button class="content-aligment__close modal-dialog__close" id="close" rel="modal:close">×</button>
        </div>
        <div class="content-aligment">
            <div class="form-header" style="color: #fff">
                Заявка на регистрацию медоборудования.
            </div>
            <div class="form-text" style="color: #85a4b8;">Вы получите подробную первичную консультацию <b>бесплатно</b>, для уточнения Ваших целей, задач и подбора оптимального пути для получения РУ. Наш эксперт ответит на все интересующие Вас вопросы.</div>
            <div class="form-item">
                <input type="text" name="name" placeholder="Ваше Имя">
            </div>
            <div class="form-item">
                <input type="email" name="email" placeholder="Ваш email">
            </div>
            <div class="form-item">
                <input type="tel" name="phone" placeholder="Ваш телефон" class="phone">
            </div>
            <button class="btn-hover btn-send color-3" style="width: 100%">ПОЛУЧИТЬ</button>
        </div>
    </form>

ссылка на сайт http://mytrueblog.site/site/index.html

Answer 1

помог вариант с функцией minlength: function () { return jQuery.validator.format("Еще {0} символа") }

READ ALSO
вычитание первого взноса при условии его минимальной ставки в %

вычитание первого взноса при условии его минимальной ставки в %

Совсем запутался с процентами в наличии имеем wordpress и плагин cost calculator (внутри него условия по сути на JS ) делаю калькуляторы ипотеки с разными...

89
Как в jquery установить maxlength для другого поля text?

Как в jquery установить maxlength для другого поля text?

Нужно в первом input type="text" считать длину и устанавливать ее во втором input type="text" как maxlength

157
$.totalStorage is not a function

$.totalStorage is not a function

данный плагин - totalStorage - подключен в начале загружаемой страницыОднако при его использовании на странице, в консоли Uncaught TypeError: $

190