jQuery validator plugin + ajax submit не работает

Question

Я использую плагин validator jQuery (1.11) из bassistance.de и отправляю через php. Теперь я добавляю вызов ajax в обработчике отправки в конце кода javacript, но вызов не работает и не существует для консоли firebug.

CASE 1 Если я положил вызов ajax в начале сайта, он работает, но плагин-валидатор больше не виден.

CASE 2 Если я поставил вызов внутри обработчика отправки, его не существует и форма отправляется php.

CASE 3 Если я поместил код в конце страницы, контактная форма все же будет отправлена ​​php.

Вот Аякса вызов:

$("#contactform").submit(function(e){ 
    e.preventDefault(); 
    $.ajax({ 
     type: "POST", 
     url: "formfiles/submit.php", 
     data: $(this).serialize(), 
     success: function() { 
      $('#contactform').html("<div id='message'></div>"); 
      $('#message').html("<h2>Your request is on the way!</h2>") 
      .append("<p>someone</p>") 
      .hide() 
      .fadeIn(1500, function() { 
       $('#message').append("<img id='checkmark' src='images/ok.png' />"); 
      }); 
     } 
    }); 
    return false; 
}); 

Кто-нибудь знает, что случилось?

Заранее благодарим за любую помощь, изо всех сил пытаясь понять это.

EDIT Для лучшего понимания проблемы, вот полный Javascript

$(document).ready(function(){ 
$("#contactform").validate();  
$(".chapta").rules("add", {maxlength: 0});  



var validator = $("#contactform").validate({ 

    ignore: ":hidden", 
    rules: { 
     name: { 
      required: true, 
      minlength: 3 
     }, 
     cognome: { 
      required: true, 
      minlength: 3 
     }, 
     subject: { 
      required: true, 

     }, 



     message: { 
      required: true, 
      minlength: 10 
     } 
    }, 

    submitHandler: function(form) { 



    $("#contactform").submit(function(e){ 
    e.preventDefault(); 
    $.ajax({ 
    type: "POST", 
    url: "formfiles/submit.php", 
    data: $(this).serialize(), 
    success: function() { 
     $('#contactform').html("<div id='message'></div>"); 
     $('#message').html("<h2>Your request is on the way!</h2>") 
     .append("<p>someone</p>") 
     .hide() 
     .fadeIn(1500, function() { 
      $('#message').append("<img id='checkmark' src='images/ok.png' />"); 
     }); 
    } 
    }); 
    return false; 
}); 
    }, 

}); 

}); 

EDIT 2

Селекторы и все остальное, кажется, чтобы быть в порядке.

<form action="#n" class="active" method="post" name="contactform" id="contactform"> 

Answer 1

Ваш ajaxпринадлежит внутри обратного вызова функции плагина JQuery Validate submitHandler.

As per docs,

submitHandler, Обратный звонок, по умолчанию: по умолчанию (родная) отправка формы

Callback для обработки фактических смиряться, когда форма действует. Возвращает форму как единственный аргумент.Заменяет по умолчанию submit. Правильное место для отправки формы через Ajax после этого проверено.

Другая проблема заключается в том, что вы звоните .validate() дважды. После того, как он вызывается в первый раз, другой экземпляр игнорируется, и поэтому все правила вы пытаетесь передать в него. Метод .validate() получает вызов ОДИН раз на DOM, готовый к , инициализирует плагин на вашей форме.

Наконец, вам не нужно вставлять обработчик submit в функцию обратного вызова submitHandler.

DEMO: http://jsfiddle.net/nTNLD/1/

$(document).ready(function() { 

    $("#contactform").validate({ 
     ignore: ":hidden", 
     rules: { 
      name: { 
       required: true, 
       minlength: 3 
      }, 
      cognome: { 
       required: true, 
       minlength: 3 
      }, 
      subject: { 
       required: true 
      }, 
      message: { 
       required: true, 
       minlength: 10 
      } 
     }, 
     submitHandler: function (form) { 
      $.ajax({ 
       type: "POST", 
       url: "formfiles/submit.php", 
       data: $(form).serialize(), 
       success: function() { 
        $(form).html("<div id='message'></div>"); 
        $('#message').html("<h2>Your request is on the way!</h2>") 
         .append("<p>someone</p>") 
         .hide() 
         .fadeIn(1500, function() { 
         $('#message').append("<img id='checkmark' src='images/ok.png' />"); 
        }); 
       } 
      }); 
      return false; // required to block normal submit since you used ajax 
     } 
    }); 

}); 

Answer 2

Вы должны поместить свой код в готовый обратный вызов документа, чтобы быть уверенным, что DOM (ваша форма) загружена раньше.

$(document).ready(function() { 
//Code 
}); 

Вы должны удалить существующую .submit() из submitHandler и поместить его вне инициализации проверки, но внутри ready. Затем внутри submitHandler вы вызываете только form.submit(); С form.submit(); вы запускаете submit, а затем другой.

Или вы размещаете свой $.ajax непосредственно в submitHandler.

Как вы это делаете сейчас, вы добавляете слушателя событий только в момент нажатия кнопки отправки. Это на самом деле поздно. Непосредственно после этого ваша форма отправляется без аякса.

Answer 3

Легко. Только это

if ($("label.error").length===false || $("label.error").is(":visible")===false) { 

here set the ajax 

}