jquery validate plugin 1.14 submitHandler отправить синтаксис

Question

У меня простая форма контакта в html с помощью jq 1.14 validator и jq 1.11.3. Форма отправляется через ajax в мой php-скрипт. Все это работает, но я заметил какое-то странное поведение, и я надеюсь получить здесь ответ. Вот вопрос: Форма отправляет, принимает json и выполняет функцию .done. Итак, тогда мне удалось обновить, когда я изменил некоторые полностью несвязанные css на другой части страницы и WHAM !, полностью пустую страницу с только именем (мое название компании), что больше, на .ico на вкладке окна это НЕПРАВИЛЬНАЯ Икона. Это совершенно другой .ico из совершенно другой папки проекта на моем корне (я использую XAMPP). Теперь, если я снова освежусь, все полностью вернется к норме. Я думаю, что это может быть связано с тем, что мой submitHandler отправляет два раза или, возможно, проблему с кешем, но у меня нет подсказки, и я не мог найти это поведение в любом месте в Интернете. Я подозрительно, что мне нужно добавить return false или event.preventDefault, но независимо от того, где я разместил их в submitHandler, нечетное поведение остается. Мне еще многое предстоит узнать, но я также подозрительно, что это может быть ошибкой в ​​самом плагине.

$(document).ready(function(){ 

    $('#contactForm').validate({ // initialize the plugin 

      debug: true, 

      rules: { 
       name: { 
        required: true, 
        minlength: 3, 
        maxlength: 30 
       }, 
       email: { 
        required: true, 
        maxlength: 30 
       }, 
       msg: { 
        required: true, 
        minlength: 5, 
        maxlength: 256 
       }, 
       human: { 
        required: true, 
        maxlength: 1 
       } 
      }, // rules 

      messages: { 
       name: { 
        required: "Gotta have your name", 
        minlength: "Please include your complete name", 
        maxlength: "Name is too long. Please abbreviate." 
       }, 
       email: { 
        required: "We really need your email address.", 
        minlength: "Email address is too short", 
        maxlength: "Email address is too long. Please contact us directly." 
       }, 
       msg: { 
        required: "Please tell us what's on your mind.", 
        minlegth: "Your message is too short", 
        maxlength: "Your message is too long" 
       }, 
       human: { 
        required: "You must provide an answer" 
       } 
      }, // messages 

      submitHandler: function (form) { 

       fdata = $(form).serialize(); 
       console.log("fdata is: " + fdata); 

       $.ajax({ 
        type: "POST", 
        url: "processContact.php", 
        data: fdata, 
        dataType: 'json' 
        }) 
        .done(function(returnData, jqXHR, textStatus) { 
         //console.log("returnData[0]: " + returnData[0]); 
         //console.log("returnData[1]: " + returnData[1]); 
         //alert("submitted!"); 
         if (returnData[0] == "sent" && returnData[1] == "OK"){ 
          //console.log("HIP HIP HOORAY!!"); 
          $('#successCon').fadeIn("slow"); 
         } 
         if (returnData[0] != "failed" && returnData[1] != "NOTOK"){ 
          $("errorCon").html("<p><i><strong>" + returnData[0] + "</strong></i></p>") 
         } else { 
          $("#errorCon").html("<p>There was a problem sending your message. Please contact us directly via <i><strong>contact [at] tunetakeout (dot) com</strong></i></p>").fadeIn("slow"); 
         } 
         }) 
         .fail(function (jqXHR, textStatus, errorThrown) { 
          alert("failed!" + textStatus, errorThrown); 
         }) 
         .always(function() { 
          $("#contactForm :input").prop("disabled", true); 
         }); 

       return false; 

      } // submitHandler 

    }); // validate 

}); // document.ready 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

<form class="form-horizontal" id="contactForm" name="contactForm" method="post"> 
          <div class="form-group"> 
           <label for="name"><span class="required"></span></label> 
           <input type="text" name="name" class="form-control" placeholder="Your Name..." maxlength="30" /> 
          </div> 
          <div class="form-group"> 
           <span class="required"></span> 
           <input type="email" name="email" class="form-control" placeholder="Your Email..." maxlength="30" /> 
          </div> 
          <div class="form-group"> 
           <label for ="name"><span class="required"></span></label> 
           <textarea class="form-control" name="msg" style="height: 120px;" placeholder="Write your message (256 character max)..."></textarea> 
          </div> 
          <div class="form-group"> 
           <label for="human"><span class="required"></span></label> 
           <p>Are you human?</p> 
           <input type="number" name="human" class="form-control" placeholder="What is three times five divided by three?" maxlength="1" /> 
          </div> 
          <button type ="reset" id="clear" name="clear" class="btn btn-grey">Clear</button> 
          <button type="submit" id="submit" name="submit" class="btn btn-orange pull-right">SEND</button> 
         </form> 
         <div id="successCon" class="text-center"><p><i><strong>Thank you, your message was sent! We'll be in touch shortly.</strong></i></p></div> 
         <div id="errorCon" class="text-center"></div> 

Итак, где должен возвращение ложным или event.preventDefault быть размещены? Нужно ли мне перерабатывать код для отправки вручную, и если да, то на что это похоже?

Answer 1

Итак, где следует разместить return false или event.preventDefault?

Поместите return false в конце обычая submitHandler, как вы сделали. Вам вообще не нужен .preventDefault(), так как плагин уже позаботится об этом.

---

Удалить the debug: true option.

Используется только при отладке и блокирует нормальное представление формы.

Предотвращает отправку формы и пытается помочь в ее проверке с предупреждениями о методах и других отладочных сообщениях.