jQuery Validate Plugin w/AJAX не отправит

Question

ОЧЕНЬ новый для jQuery. Попытка использования плагина jQuery Validate. После ввода кода, который я «Frankensteined» вместе с документами плагина, несколькими сообщениями здесь, другими сайтами и видеороликами, я не могу получить это, чтобы отправить. JSHint показывает 5 ошибок, начиная с строки submitHandler.

Фактически это разрушило расположение моей страницы, поэтому я должен ее довольно испортить. У меня есть все зависимые библиотеки, связанные правильно (spinJS, jQuery, jQuery Forms), так как остальная часть jQuery работала. «Работало», я имею в виду, что форма будет отправлять почтовый скрипт и отправлять электронную почту.

После ввода подтверждающей кодовой страницы будет обновляться при отправке. Я смог увидеть «пожалуйста, введите свое имя» и т. Д. ErrorContainer overlay, но форма не будет отправлена, но страница была неповрежденной. Я добавил submitHandler и разрушил все это. Скрытые, сложенные divs видны.

Форма submit DID работает до добавления подтверждающего кода.

Я уверен, что ошибки встречаются повсюду. Это выглядит НИЧЕГО, как то, что мне нужно? Любое направление было бы высоко оценено.

*** Этот код работал:

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('#submit').click(function(){ 
      $('#submit').prop("disabled", true); 
      $('#spinz').spin('daycare','red');  
      $.post("php/mailer.php", $("#contactInput").serialize(), function(response) { 
       $('#spinz').spin(false);  
       $("#contact").hide(); 
       $("#8Btn").css("color", "#BCDF62"); 
       $("#confirm").show("slide"); 
      }); 
      return false; 
     }); 
    }); 
</script> 

** Это оленья кожа

<script type="text/javascript">     
    $(document).ready(function(){ 
     $("div .contentBox").hide(); // hides all content divs w/class=contentBox 
     $("#homePage").show("slide"); // animates home page loading 
     $(".linkButtons").css("color", "white"); // turns all link text to white (not selected) 
     $("#1Btn").addClass("menuLit"); 
     $("#1Btn").css("color", "#BCDF62"); 
     $("#submit").prop("disabled", false); 

     /*Validation Code*/ 
     $(function(){ 
      $('#contactInput').validate({ 
       rules: { 
        fNameInput: "required", 
        lNameInput: "required", 
        pNumber:  "required", 
        email:   "required", 
        msgArea: "required" 
       },       
       messages: { 
        fNameInput: "Please enter your first name.", 
        lNameInput: "Please enter your last name.", 
        pNumber: "Please enter your phone number.", 
        email:  "Please enter your email address.", 
        msgArea: "Please type a message." 
       }, 
       errorContainer: $('#errorContainer'), 
       errorLabelContainer: $('#errorContainer ul'), 
       wrapper: 'li' 
      }); 

      submitHandler: function(form) { 
       $('#submit').prop("disabled", true); 
       $('#spinz').spin('daycare','red');  
       $.post("php/mailer.php", $("#contactInput").serialize(),  
        function(response) { 
         $('#spinz').spin(false);  
         $("#contact").hide(); 
         $("#8Btn").css("color", "#BCDF62"); 
         $("#confirm").show("slide"); 
        }  
       }); 

<script/> 

Answer 1

Вы должны увидеть некоторые серьезные ошибки JavaScript в журнале консоли.

Вы неправильно разместили свой submitHandlerвне метода .validate(), а также некоторые неуместные/отсутствующих закрывающих скобок. Просто отступов и форматирование кода показал эти ошибки мгновенно ...

$('#contactInput').validate({ 
    rules: { 
     .... 
    },       
    messages: { 
     .... 
    }, 
    errorContainer: $('#errorContainer'), 
    errorLabelContainer: $('#errorContainer ul'), 
    wrapper: 'li' 
}); 

submitHandler: function(form) { 
    $('#submit').prop("disabled", true); 
    $('#spinz').spin('daycare','red');  
    $.post("php/mailer.php", $("#contactInput").serialize(), function(response) { 
     $('#spinz').spin(false);  
     $("#contact").hide(); 
     $("#8Btn").css("color", "#BCDF62"); 
     $("#confirm").show("slide"); 
    } // <- ??  
}); // <- ?? 

submitHandler принадлежит внутри метода .validate() ...

$('#contactInput').validate({ 
    rules: { 
     .... 
    },       
    messages: { 
     .... 
    }, 
    errorContainer: $('#errorContainer'), 
    errorLabelContainer: $('#errorContainer ul'), 
    wrapper: 'li', 
    submitHandler: function() { 
     .... 
    } 
}); 

---

Примечание стороны: Вы» ve завернул ваш метод .validate() в пределах . Это обработчик событий DOM ready. Проблема в том, что у вас уже есть все это в другом обработчике событий DOM, $(document).ready(function(){...}).

это просто сокращение от $(document).ready(function(){...}), поэтому бессмысленно вставлять один из другого.