Страницы

Поиск по вопросам

вторник, 28 мая 2019 г.

Почему вызов плагина jquery-validate происходит со второго раза?

Пытаюсь сделать валидацию формы с помощью плагина jquery-validate
// Callback forms (function(){ var app = { init: function(){ this.setUpListeners(); }, setUpListeners: function(){ $(document).on('submit', 'form', this.submitForm); $(document).on('keyup', 'input', this.removeError); }, submitForm: function(e){ e.preventDefault(); var form = $(this), btnSubmit = form.find('[type="submit"]'); if(app.validateForm(form) === false) return false; btnSubmit.addClass('disabled'); var str = form.serialize(); $.ajax({ url: 'contacts.php', type: 'post', data: str }).done(function(msg){ if(msg === "OK"){ var res = "

Well done! You successfully read this important alert message.
"; $(".fancybox").html(res); setTimeout(function(){ $.fancybox.close(); }, 2000) console.log('ok'); $(".fancybox").fancybox().trigger('click'); }else { $(".fancybox").html(msg); $(".fancybox").fancybox().trigger('click'); } }).always(function(){ btnSubmit.removeAttr('disabled', ''); }); }, validateForm: function(form){ var inputs = form.find('input'), valid = true; form.validate({ invalidHandler: function(event, validator){ var errors = validator.numberOfInvalids(); if (errors) { valid = false; } else { console.log('valide'); } validator.focusInvalid(); } }); return valid; }, removeError: function(){ var $this = $(this), formGroup = $this.closest('.form-group'); formGroup.removeClass('has-danger'); } } app.init(); })(); if($(".modalbox").length){ $(".modalbox").fancybox({ fitToView : false, autoSize : false, closeClick : false, maxWidth : 502, maxHeight : 444, prevEffect : 'none', nextEffect : 'none', padding : 0, margin : 50, closeBtn : false, helpers : { overlay : { css : { 'background' : 'rgba(0, 0, 0, 0.72)' } }, } }); } .callback-modal { display: none; } JS Bin
Но не могу понять, почему срабатывает проверка, только со второго раза? Возможно кто-то работал с данным плагином.
Как можно исправить модуль, чтобы плагин срабатывал и срабатывал как положено (если поля не заполнены, форма не отправляется отображаются error поля, если все в порядке, то отправляются данные)?


Ответ

В данном случае происходит неверное использование плагина. Перед тем как использовать что-то, это что-то надо инициализировать.
По аналогии, рассчитывать, что сработает this.submitForm при отправке формы, не вызвав app.init

Далее, сама инициализация, выполнена не совсем корректна.
В документации к плагину можно увидеть, что свойство invalidHandler нужно для выполнения своего кода в случае если валидация не прошла. В коде в вопросе, в этом методе идет выставление переменной valid, которая в коде используется для определения того, прошла валидация или нет.
Вместо это нужно было использовать метод form, который как раз возвращает результат проверки, без дополнительных переменных.
В итоге метод validateForm: function(form){ можно удалить и заменить его использование на одну строку
form.validate().form()
В этом случае плагин не будет инициализирован дважды и более раз, ввиду наличия проверки внутри самого плагина.
Пример:
// Callback forms (function() { var app = { init: function() { this.setUpListeners(); }, setUpListeners: function() { $(document).on('submit', 'form', this.submitForm); $(document).on('keyup', 'input', this.removeError); }, submitForm: function(e) { e.preventDefault(); var form = $(this), btnSubmit = form.find('[type="submit"]'); if (form.validate().form() === false) return false; btnSubmit.addClass('disabled'); var str = form.serialize(); $.ajax({ url: 'contacts.php', type: 'post', data: str }).done(function(msg) { if (msg === "OK") { var res = "

Well done! You successfully read this important alert message.
"; $(".fancybox").html(res); setTimeout(function() { $.fancybox.close(); }, 2000) console.log('ok'); $(".fancybox").fancybox().trigger('click'); } else { $(".fancybox").html(msg); $(".fancybox").fancybox().trigger('click'); } }).always(function() { btnSubmit.removeAttr('disabled', ''); }); }, removeError: function() { var $this = $(this), formGroup = $this.closest('.form-group'); formGroup.removeClass('has-danger'); } } app.init(); })(); if ($(".modalbox").length) { $(".modalbox").fancybox({ fitToView: false, autoSize: false, closeClick: false, maxWidth: 502, maxHeight: 444, prevEffect: 'none', nextEffect: 'none', padding: 0, margin: 50, closeBtn: false, helpers: { overlay: { css: { 'background': 'rgba(0, 0, 0, 0.72)' } }, } }); } .callback-modal { display: none; }

Комментариев нет:

Отправить комментарий