Пытаюсь сделать валидацию формы с помощью плагина 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 = "
Но не могу понять, почему срабатывает проверка, только со второго раза? Возможно кто-то работал с данным плагином.
Как можно исправить модуль, чтобы плагин срабатывал и срабатывал как положено (если поля не заполнены, форма не отправляется отображаются 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 = "
Комментариев нет:
Отправить комментарий