jquery驗證和提交消息

我正在使用jquery來驗證我的表單中的每個字段，並使用jquery在提交表單後顯示「加載」消息。現在，在我的情況下，當我點擊提交按鈕時將會顯示驗證消息以及加載消息，我感到困惑。一旦一切正確，我只需要顯示加載消息。jquery驗證和提交消息

<html lang="en"> 
    <head> 
     <title>SO question 3377468</title> 
     <script src="http://code.jquery.com/jquery-latest.min.js"></script> 
     <script> 
      $(document).ready(function() { 
       $('#form').submit(function() { 
        $('#progress').show(); 
       }); 
      }); 
     </script> 
     <style> 
      #progress { 
       display: none; 
       color: green; 
      } 
     </style>    
    </head> 
    <body> 
     <form id="form" action="servlet-url" method="post"> 
      ... 
      <input type="submit"> 
     </form> 
     <div id="progress">Please wait...</div> 
    </body> 
</html>

How to show jquery message after clicking on submit button

我拿着時的一個同事曾經幫助這個代碼，現在我要完成這一點。

來源

2010-08-01 maas

哪裏是你的驗證代碼？ – Jhong 2010-08-01 10:48:51

可能是這樣的：

<input type="button" value="SUBMIT" onclick="validateFunction()">

然後在你的validateFunction，在結束時，如果它是所有好去然後調用document.form.submit()將處理您的加載對話框，併發送表單。另外，作爲一個方面說明，因爲你說你正在使用jquery進行驗證，在你當前的設置下，一個禁用javascript的人仍然可以提交無效數據（導致各種drop table和whatnot）。通過這種方法（在腳本中調用提交），他們將無法發送AT ALL。

另一條路線是：

<input type="submit" onclick="validateFunction();return false;">

而在你的驗證功能月底將其設置爲返回（真/假）如果可以發送或不。然後在服務器端重新驗證，使用PHP或其他方法，並在出現任何問題時返回錯誤。這允許沒有javascript的用戶仍然嘗試發送，但不讓他們銷燬您的網站。

來源

2010-08-01 10:53:21 WSkid

我建議把一個.click放在提交按鈕上，而不是把onclick函數調用放入input屬性本身。使代碼調試更簡單。 – Chris 2010-08-01 11:00:25

我仍然收到了這兩個消息 – maas 2010-08-01 11:17:15

如果您使用的是validation plugin（我對此問題不清楚，但是標記爲這種方式），只需將代碼移動一下即可。取而代之的是：

$(document).ready(function() { 
    $('#form').submit(function() { 
     $('#progress').show(); 
    }); 
});

您將要使用的插件的submitHandler option，這個功能只能運行一種形式具有成功通過驗證並提交，這樣以後：

$("#form").validate({ 
    //other options... 
    submitHandler: function() { 
    $('#progress').show(); 
    } 
});

這意味着只需刪除第一塊代碼即可，submitHandler代碼就是您應該留給#progress的所有東西。

來源

2010-08-01 11:11:25

尼克的回答幾乎是爲我工作 - 但我認爲你也需要再提交表單...

$(document).ready(function(){ 
    $("#form").validate({ 
     //other options... 
     submitHandler: function() { 
      $('#progress').show(); 
      form.submit(); 
     } 
    }); 
});

來源

2011-01-16 22:31:18

這會更好地作爲對其他答案的評論。 – 2012-12-02 02:11:00

jquery驗證和提交消息

回答

相關問題