爲什麼兩種不同的HTML5表單計算提交方法返回不同的行爲？

Question

如果我理解正確，當通過.submit()（而不是通過點擊<input type="submit" />手動提交）計算提交HTML5表單時，瀏覽器將不會檢查具有required屬性的表單字段。

但是。如果通過.click()計算點擊現有的<input type="submit" />，則檢查具有required屬性的表單字段是檢查。

所以......我討厭問明顯，但爲什麼在首位.submit()的限制，如果在一個不可見<input type="submit" />檢查required反正計算.click()？這裏的想法是什麼？

例子：

var submitButtonForm = document.getElementsByClassName('submit-button-form')[0]; 
 
var submitButton = submitButtonForm.getElementsByClassName('submit-button')[0]; 
 

 
submitButton.addEventListener('click', function(){submitButtonForm.submit();}, false); 
 
submitButtonForm.addEventListener('submit', function(){window.alert('Required attribute did not work and onsubmit event did not work either');}, false); 
 

 
var clickButtonForm = document.getElementsByClassName('click-button-form')[0]; 
 
var clickButton = clickButtonForm.getElementsByClassName('click-button')[0]; 
 
var realSubmit = clickButtonForm.querySelector('input[type="submit"]'); 
 

 
clickButton.addEventListener('click', function(){realSubmit.click();}, false);

form { 
 
display: inline-block; 
 
float: left; 
 
width: 180px; 
 
height: 180px; 
 
font-size: 16px; 
 
line-height: 24px; 
 
font-family: arial, helvetica, sans-serif; 
 
text-align: center; 
 
background-color: rgb(227, 227, 255); 
 
border: 2px solid rgb(255, 255, 255); 
 
} 
 

 
label { 
 
display: block; 
 
margin-bottom: 24px; 
 
font-size: 12px; 
 
line-height: 18px; 
 
text-transform: uppercase; 
 
} 
 

 
.click-button-form input[type="submit"] { 
 
display: none; 
 
}

<form class="real-submit-form" action="#"> 
 
<h2>Form 1</h2> 
 
<label>Required Field: 
 
<input type="text" required /> 
 
</label> 
 
<input type="submit" value="I am a real Submit" /> 
 
</form> 
 

 
<form class="click-button-form" action="#"> 
 
<h2>Form 2</h2> 
 
<label>Required Field: 
 
<input type="text" required /> 
 
</label> 
 
<input type="button" class="click-button" value="I am a Button [ .click() ]" /> 
 
<input type="submit" value="I am also a real Submit... (but hidden!)" /> 
 
</form> 
 

 
<form class="submit-button-form" action="/"> 
 
<h2>Form 3</h2> 
 
<label>Required Field: 
 
<input type="text" required /> 
 
</label> 
 
<input type="button" class="submit-button" value="I am a Button [ .submit() ]" /> 
 
</form>

Answer 1

從評論

我看它是這樣的：當用戶點擊提交按鈕時，他/她請求表單提交，您可以反過來攔截，並要求瀏覽器執行一些驗證。另一方面，如果您從JS的窗體上調用.submit()，則本質上要求瀏覽器執行提交。換句話說，我認爲這是關於最終用戶的特權與您作爲應用程序創建者的特權。

我的觀點是，「從JS調用.submit（）」和「從JS調用表單提交按鈕調用.click（）」之間的區別幾乎可以忽略不計。

呃，實際上並非如此。計算出的click()和實際點擊按鈕都具有相同的效果：點擊事件正在分派。這是點擊方法的責任：它應該「假裝」用戶點擊了按鈕。這是而不是click()方法的責任，以找出你打算要通過該點擊事件。它只是'點擊按鈕'爲你。

這同樣適用於該submit()方法：這不是它的責任弄清楚你是否打算向實際上提交繼續，或實際上要首先執行一些驗證。它只是完成它的工作：繼續提交表單。

在某些情況下，效果的差異可能很小，但語義上的差異是顯着的。

您實際上只剩下一個選擇 - 控​​制應該發生什麼 - 您想如何繼續提交。如果您不確定輸入是否可信，請撥打click()方法，否則請撥打submit()方法。

既不應該注意要求，或者，理想情況下（在我心中）都應該。

當您以編程方式在窗體上調用submit()時，我認爲引擎可能會認爲您確定要繼續進行提交是公平的。這就是該方法的設計目的。

submit()有可能沒有驗證程序是故意的。它給了我們自由來塑造我們自己的應用程序和規則。例如，可能需要定期保存用戶輸入的草稿，而不管該輸入是否有效。然後錯誤消息可以通知用戶有關無效輸入。這對於大型表單（博客帖子，空缺，你的名字）非常方便，需要一些時間來填寫。

如果你不知道你是否可以信任的電流輸入，你會想這個僞代碼轉換爲一個工作版本：

if (isValid(myForm)) { 
    myForm.submit() 
} else { 
    // Some function that checks the validity of all inputs, and 
    // displays messages accordingly. 
    showValidationErrors(myForm) 
} 

當調度click事件（因此假設由「不可信」來源觸發），瀏覽器驗證設施自動啓動，我認爲這也是公平的。