如何防止JavaScript form.submit（）忽略必填字段

我有一個HTML表單，其中包含一些圖像的文本字段和文件輸入。它具有文本所需的字段，它還對使用JavaScript（jQuery）選擇的圖像進行了一些客戶端驗證。如何防止JavaScript form.submit（）忽略必填字段

這裏是形式：

<form name="addbookform" id="addbookform" action="processaddbook.php" method="POST"> 
<p /> 
<input name="name" id="name" type="text" placeholder="Name" required /> 
<p /> 
<textarea name="description" id="description" cols=30 rows=4 placeholder="Enter a short description"> 
</textarea> 
<p /> 
<input name="image" id="image" type="file" accept="image/png, image/jpeg" /> 
<p /> 
<input type="button" id="finishbutton" value="Submit" /> 
</form>

做我寫了一些JavaScript代碼（使用jQuery）圖像客戶端檢查，並將其鏈接到finishbutton。

$(document).ready(function() { 
    $('#finishbutton').click(function() { 
     var fileInput = document.getElementById("bookimage"); 
     if (fileInput.value == "") { 
      // We can just submit the form without an image. 
      addbookform.submit(); 
     } else { 
      // Check for image size and other properties... 
      if (success == true) { 
       addbookform.submit(); 
      } 
     } 
    }); 

});

現在圖像檢查工作正常（報告錯誤或圖像有效），但是，也有在窗體上的name輸入必填字段。當圖像檢查通過（或沒有圖像），提交函數被調用，但它似乎像HTML已跳過所需的字段驗證。

有沒有辦法來防止這種情況？

來源

2017-08-04 Tom Shen

我會使用普通的'type = submit'按鈕，然後使用$（「＃addbookform」）。on（「submit」，...）'做任何額外的驗證，防止提交如果圖像驗證失敗，否則只是允許默認的提交行爲繼續。 – nnnnnn

我想，而不是強迫的形式提交，周圍做其他的方式：防止表單提交，如果出現錯誤

更改提交按鈕類型提交。這會在點擊時呈現一個帶有表單提交動作的按鈕。
更改事件以使用表單提交而不是按鈕單擊。
將標誌值設置爲true。如果通過驗證結束，標誌爲假，防止提交。
檢查你的圖像。如果出現任何問題，請更換標誌。
檢查您的輸入。如果出現任何問題，請更換標誌。
（注）到目前爲止，還沒有停止表單提交。只更改標誌。
驗證結束。檢查你的旗幟。如果爲false，請阻止提交。如果屬實，則什麼都不做。

在表單提交中，如果您在return false;處提交事件的任何一點，提交將被取消。

來源

2017-08-04 04:22:48

如果您希望避免對已經標記爲「必需」屬性的字段進行雙重檢查，則可以詢問表單additemform.checkValidity（），只有當所有必需的輸入都具有某個值時，纔會返回true。但明確地說，捕獲表單提交事件將比捕獲按鈕點擊更可控，以防止無效提交。 –

如何防止JavaScript form.submit（）忽略必填字段

回答

相關問題