HTML表單並不總是提交

Question

我有一個HTML表單，該表單有時會提交而有時不會提交。 使用按鈕提交表單，該按鈕使用javascript驗證表單，然后也使用javascript提交表單，如下所示：

<form id="my-form">
  <input type="hidden" name="csrf-token">
  <input type="text" name="1">
  <input type="text" name="2">
  <button onclick="validateForm()">
</form>

<script>
  function validateForm() {
    // Validate rules here
    document.forms['my-form'].submit();
  }
</script>

這很簡單。 然后將數據發送到服務器，檢查csrf令牌，然后將輸入保存到數據庫中。 我想了解為什么表單不會一直提交。 有時，當我單擊“提交”按鈕時，頁面會重新加載，而其他時候將表單保存到數據庫中后，數據就消失了，而我又被重定向到了下一頁。

根據我的猜測，我認為這可能與到期有關。 如果啟動表單並將其保留太長時間，則不會提交。 每次我立即提交表單時，都會提交。 但是有時當我離開表格太長時間時，它確實會提交。

您可以想象，由於有時丟失輸入的數據，這可能會令人沮喪。 可能是此問題的原因？ 謝謝。

Answer 1

解：
將type="button"屬性添加到您的<button> 。 這將阻止表單將您的按鈕視為submit按鈕。

說明：
“有時有效”通常意味着您有比賽條件。 您的競爭條件介於JavaScript和默認瀏覽器行為之間。 <button>的默認type屬性是submit 。 您的示例代碼中的窗體沒有action或method屬性。 在這些情況下，單擊按鈕時，表單的默認行為是對當前網址執行GET 。 單擊按鈕也將運行您的JavaScript。 但是，取決於默認行為重新加載頁面的速度（或驗證的速度），您的javascript submit會被點擊。

Answer 2

從我的角度來看，您正在使用CSRF令牌。 CSRF令牌的到期時間取決於您使用的框架/ CMS。 這幾乎是可配置的。

現在發生的是，當CSRF令牌到期時，服務器拒絕了輸入。 這可能是您的情況。 要進行檢查，請長時間打開表單並提交，如果相同的問題重復出現，請使用以下解決方案，否則不是您的情況。

一個簡單的解決方案是增加CSRF令牌的到期時間並檢查現象是否重復。