jQuery form.validate（）回調無法執行（$ .ajax）

我目前遇到了HTML表單的問題。我試圖驗證表單（規則在HTML 5代碼中），然後使用$ .ajax調用將其提交給php腳本進行處理。其目的是確保在提交之前填充各個字段，並用ajax打印任何其他錯誤（用戶存在，使用電子郵件，Web開發者無知等）。否則，如果一切正常，則意味着隱藏表單並顯示確認消息。

使用下面的代碼，驗證工作正常，但$ .ajax調用不會 - 表單的默認操作觸發intead。但是，如果我將validate函數及其submitHandler（及其右括號）註釋掉，則表單提交正常工作。我已經砸了幾天頭，但沒有運氣。任何人可以提供的幫助或見解將不勝感激。

這是我正在運行的JavaScript。

<script type="text/javascript"> 
$(document).ready(function() { 

    $("#Submit").click(function() { 

     $("#mrf").validate({ 
      submitHandler: function() { 
        // Begin the submit handler function 
        var action = $("#mrf").attr('action'); 
        var msg_success = '<p style="font-weight: bold;">Your registration was successful! You should receive a welcome email shortly.</p>'; 
        var form_data = { 
         Surname: $("#Surname").val(), 
         First_Name: $("#FirstName").val(), 
         Other_Names: $("#OtherNames").val(), 
         Address: $("#Address").val(), 
         Suburb: $("#Suburb").val(), 
         State: $("#State").val(), 
         Postcode: $("#Postcode").val(), 
         Email: $("#Email").val(), 
         Username: $("#Username").val(), 
         INSTEP: $("#INSTEP").val(), 
         Mobile: $("#Mobile").val(), 
         Cohort: $("#Cohort").val(), 
         Academy: $("input:radio[name=Academy]:checked").val(), 
         University: $("#University").val(), 
         Program: $("#Program").val(), 
         NonUni: $("#NonUni").val(), 
         Mentoring: $("input:checkbox[name=Mentoring]:checked").val(), 
         CAS: $("input:checkbox[name=CAS]:checked").val(), 
         Motivational_Speaking: $("input:checkbox[name=MotivationalSpeaking]:checked").val(), 
         Workshops: $("input:checkbox[name=Workshops]:checked").val(), 
         Tutoring: $("input:checkbox[name=Tutoring]:checked").val(), 
         Newsletter: $("input:checkbox[name=Newsletter]:checked").val(), 
         is_ajax: 1 
        }; 

        $.ajax({ 
         type: "post", 
         url: action, 
         data: form_data, 
         success: function(response) { 
          if(response == 'success') { 
           $("#mrf-form").slideUp('slow', function() { 
            $("#ajaxResponse").html(msg_success); 
           }); 
          } 
          else { 
           $('#ajaxResponse').html("<p class='error'>" + response + "</p>"); 
          } 
         } 
        }); 
        // End the submit handler function  
       } 
     }); 

     return false; 
    }); 

}); 
</script>

來源

2012-05-01 Dorgrin

使這個

e.preventDEfault();

在函數的第一行

$("#Submit").click(function(e){});

這笏至少應提交默認事件不會被解僱; 然後檢查錯誤中的所有行上述$.ajax({
因爲如果他們會有任何錯誤，那麼的JavaScript將停止執行，並默認提交功能將被調用，您可以通過使用開發者工具「F12」這樣做
即。檢查表單數據中的所有值是否正確填充。

來源

2012-05-01 09:18:08

感謝您的建議！我已經使用Firebug調試了腳本，並確定錯誤發生在 'submitHandler：function（）{' 我只要一步一步就可以了，並且它會轉到jQuery庫中的此代碼 'jQuery .event.dispatch.apply（eventHandle.elem，arguments）： undefined;' 它停止執行（如果我的編輯已被註釋掉，則默認提交函數被調用）。我不知道如何解決這個問題，你認爲這是一個語法錯誤？沒有任何表單數據被傳遞。我會繼續尋找。 – Dorgrin

很高興它幫助:)所以這是你的答案 –

不是您的問題的直接答案，但它可能會更容易使用驗證插件。我一直在使用這一點，我很高興，很容易，但可擴展，並在客戶端上看起來不錯，它擁有國際化支持，如果你需要它：

http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/

話雖如此，如果你堅持用你的自定義代碼來做，你可能想讓submitHandler函數返回false。您已經提交了數據，因此您不希望該操作被觸發。

來源

2012-05-01 09:18:25 alexg

jQuery form.validate（）回調無法執行（$ .ajax）

回答

相關問題