jQuery驗證submitHandler不工作使用Ajax

我有以下形式：jQuery驗證submitHandler不工作使用Ajax

<form id="squatsForm"> 
     {% csrf_token %} 
     <input type="text" name="amount" id="squatsVal" value="Squats" /> 
     <input type="hidden" name="exercise" value="squats" /> 
     <input type="submit" id="submitSquats" value="Add Squats"/><br /> 
    </form>

我想驗證表單，然後以該形式通過Ajax發送數據進行進一步的處理。我試圖用submitHandler這樣的形式不執行加載一個新的頁面與POST請求的默認操作，而是觸發我的Ajax功能：

$(document).ready(function() { 
    $('#squatsForm').validate({ 
     rules: { 
      amount: { 
       required: true, 
       number: true  
       } 
      }, 
     submitHandler: function(form) { 
      $.post(
       "submitWorkout1", 
       form.serialize(), 
       function(data) { 
        var jsonData = $.parseJSON(data); 
        $("#squats").html(jsonData['amount']); 
       }); 
      } 
     });

然而，當我嘗試輸入數據與我的形式它重新加載頁面並且不執行Ajax請求。

在我實施驗證之前，我的Ajax請求工作正常。

來源

2013-03-24 user1427661

它是否驗證您的表單？

我沒有足夠的聲望發表評論到您的問題，否則我只是問你是否忘記結束ready函數或者在複製粘貼時錯過了它。

我用你的代碼並確認它沒有運行。當我點擊Add Squats按鈕時，它只是重新加載頁面，而不管我在數量字段中是否有適當的值。

但是，當我在代碼的末尾添加});以正確結束$(document).ready(function() {時，它工作正常！

它執行驗證，並且還觸發了我作爲submitHandler中的第一條語句發出的警報。

$(document).ready(function() { 
     $('#squatsForm').validate({ 
      rules: { 
       amount: { 
        required: true, 
        number: true 
       } 
      }, 
      submitHandler: function (form) { 
       $.post(
          "submitWorkout1", 
          form.serialize(), 
          function (data) { 
           var jsonData = $.parseJSON(data); 
           $("#squats").html(jsonData['amount']); 
          } 
        ); 
      } 
     }); 
    });

我希望解決您的問題就像正確結束ready函數一樣簡單。如果它不是我們一起進一步調試！讓我知道。

來源

2013-03-24 20:41:22

結束語在submitHandler功能的 '形式' 變量與jQuery功能將修復它

$(document).ready(function() { 
    $('#squatsForm').validate({ 
     rules: { 
      amount: { 
       required: true, 
       number: true  
       } 
      }, 
     submitHandler: function(form) { 
      $.post(
       "submitWorkout1", 
       $(form).serialize(), 
       function(data) { 
        var jsonData = $.parseJSON(data); 
        $("#squats").html(jsonData['amount']); 
       }); 
      } 
     });

請參閱這樣的回答： https://stackoverflow.com/a/10861735/1497042

來源

2013-07-05 16:51:50 aarryy

jQuery驗證submitHandler不工作使用Ajax

回答

相關問題