为什么两种不同的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事件（因此假设由“不可信”来源触发），浏览器验证设施自动启动，我认为这也是公平的。