帶有彈出“處理” div的ajaxSubmit表單驗證

Question

我在Web表單上使用ajaxSubmit。 我還需要在用戶單擊提交時彈出一個顯示“正在處理請求”的div，其背景為灰色。

我現在正在使用的代碼是這樣的：

<script type="text/javascript">
$(document).ready(function() {
    $("#CustomerService").validationEngine({
        ajaxSubmit: true,
        ajaxSubmitFile: "processor.aspx",
        success :  function() {window.location.replace("Thankyou.aspx")},
        failure : function() {}
    })
});
</script>

<script type="text/javascript">
function DimScreen()
{
    document.getElementById("DimBlackScreen").style.visibility = "visible";
}
</script>

我的HTML部分是“提交”按鈕：

<input type="submit" value="Submit" id="Send" name="Send" style="cursor:pointer;" onclick="DimScreen();" />

好了，這里的問題是：無論表單是否通過驗證，彈出的div都會一直顯示，這不是我想要的情況。

有什么方法可以讓它檢測是否通過了表單驗證，然后顯示div？

非常感謝您的幫助。

Answer 1

如果您使用的是jQuery 1.4或更高版本，請嘗試以下操作：

$(document).ajaxStart(function() {
   $("#DimBlackScreen").show();
}).ajaxStop(function() {
   $("#DimBlackScreen").hide();
});

或者，如果您使用的jQuery 1.4版本較少，請嘗試以下操作

$().ajaxStart(function() {
   $("#DimBlackScreen").show();
}).ajaxStop(function() {
   $("#DimBlackScreen").hide();
});

記住將所有這些東西都放在document.ready中

Answer 2

$(document).ready(function() {
    $("input#Send").click(function(e){
      e.preventDefault(); //prevent default submit action,, use ajax instead
      $('#DimBlackScreen').show();
      $("#CustomerService").validationEngine({
        ajaxSubmit: true,
        ajaxSubmitFile: "processor.aspx",
        success :  function() {
             $('#DimBlackScreen').hide();
             window.location.replace("Thankyou.aspx"); //or $('body').html('Thank you!');

        },
        failure : function() {}
       });// end validationEngine
 }); //end click

});//end document.ready

<input type="submit" value="Submit" id="Send" name="Send" style="cursor:pointer;" />

Answer 3

好吧，受alsahin和Kundan的其他兩個答案的啟發，我自己弄清楚了：

唯一需要更改的是ajax如何處理驗證失敗。 所以我改變了

failure : function() {}

至

failure : function() {document.getElementById("DimBlackScreen").style.visibility = "hidden";}

這樣，每次用戶單擊“提交”按鈕時，彈出的“處理” div實際上就會顯示，但是如果表單未通過驗證，則會重置為隱藏。

我對當前的代碼感到滿意，但是如果您有更好的主意，請告訴我。