javascript - 为什么两种不同的 HTML5 表单计算提交方法会返回不同的行为？

Question

如果我理解正确，当 HTML5 表单通过 .submit() 计算提交时(而不是通过单击 <input type="submit" /> 手动提交)浏览器将不会检查带有 required 的表单字段属性。

但是。如果现有 <input type="submit" />通过.click()计算点击, 然后表单字段带有 required属性被检查。

所以...我不想问显而易见的问题，但为什么要对 .submit() 进行限制？首先，如果计算 .click()在一个看不见的地方 <input type="submit" />检查 required反正？这里的思路是什么？

示例:

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()，您实际上是在要求浏览器执行提交。换句话说，我认为这是关于最终用户与您作为应用程序创建者的特权。

My point is that that the difference between "calling .submit() on a form from JS" and "calling .click() on a form's submit button from JS" is practically negligible.

其实不然。计算的 click() 和按钮上的实际点击都具有相同的效果:正在调度点击事件。这是点击方法的责任:它应该“假装”用户点击了按钮。 不是click() 方法的职责是确定您打算通过该点击事件做什么。它只是为您“点击按钮”。

submit() 方法也是如此:它不负责确定您是打算实际继续提交，还是真的想执行一些验证第一的。它只是完成它的工作:继续提交表单。

在某些情况下效果上的差异可能很小，但语义上的差异很大。

实际上，您还有一个选择 - 对应该发生的事情有一些控制权 - 您希望如何继续提交。如果您不确定输入是否可信，只需调用 click() 方法，否则调用 submit() 方法。

Either neither should pay attention to require, or, ideally, (to my mind) both should.

当您以编程方式在表单上调用 submit() 时，我认为引擎可能会假设您确定要继续提交是公平的。这就是该方法的设计目的。

submit() 上缺少验证程序很可能是故意的。它使我们可以自由地为我们的应用程序制定我们自己的程序和规则。例如，人们可能希望定期保存一份用户输入的草稿，而不管该输入是否有效。然后错误消息可以通知用户有关无效输入的信息。这对于需要花一些时间填写的大型表格(博客文章、职位空缺，随便你怎么说)来说非常方便。

如果您不确定是否可以信任当前输入，您可能希望将此伪代码转换为工作版本:

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

当点击事件被发送(因此被认为是由“不受信任”的来源触发)时，浏览器验证工具会自动启动，我认为这也是公平的。