jQuery驗證插件瓦特/ AJAX不會提交

Question

很新的jQuery。嘗試使用jQuery Validate插件。在從插件文檔中輸入我「Frankensteined」的代碼後，在這裏，其他網站和視頻中發佈了幾個帖子，我無法獲得此提交。 JSHint顯示5個錯誤，從submitHandler行開始。

它實際上破壞了我的頁面佈局，所以我必須讓它變得非常糟糕。我確實有所有依賴的庫鏈接正確（spinJS，jQuery，jQuery Forms），正如其餘的jQuery工作。通過「工作」我的意思是表單將提交到郵件腳本和發送電子郵件。

輸入驗證碼頁面將在提交時刷新。 我能夠看到「請輸入您的名字」等errorContainer覆蓋，但表單不會提交，但頁面完好無損。我添加了一個submitHandler並破壞了整個事情。隱藏的，堆疊的div可見。

表單在添加驗證碼之前提交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錯誤。

你已經正確地放在你的.validate()方法以及一些放錯地方/缺少右括號submitHandler外。簡單地縮進和格式化你的代碼表明這些失誤瞬間......

$('#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() { 
     .... 
    } 
}); 

---

旁註：你」已經將您的.validate()方法包含在之內。這是一個DOM準備好的事件處理程序。與此相關的問題是，您已經在另一個DOM就緒事件處理程序$(document).ready(function(){...})中擁有了它。

只是$(document).ready(function(){...})的簡寫，所以將一個放在另一個裏面是沒有意義的。