Question

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

但是。如果通过<input type="submit" />计算点击现有.click()，则会检查required属性 的表单字段 。

所以...我讨厌明白，但是为什么首先对.submit()的限制，如果对其他不可见的.click()的计算<input type="submit" />检查{{} 1}}无论如何？这是什么想法？

示例：

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;
}

Answer 1

来自评论

我这样看：当用户点击提交按钮时，他/她会请求表单提交，您可以依次拦截，并要求浏览器执行一些验证。另一方面，如果您在JS上的表单上调用.submit()，则基本上要求浏览器执行提交。换句话说，它是关于最终用户与您作为应用程序创建者的特权，我认为。

我的观点是＆＃34;在JS＆＃34;表格上调用.submit（）之间的区别。并且＆＃34;在JS＆＃34;的表单提交按钮上调用.click（）;几乎可以忽略不计。

嗯，实际上并非如此。计算出的click()和按钮上的实际点击都具有相同的效果：正在调度click事件。这是点击方法的责任：它应该假装＆＃39;用户单击了按钮。它是不 click()方法的责任，通过该点击事件弄清楚您打算做什么。只需点击按钮＆＃39; 即可。

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)
}

当调度点击事件（因此假设由不受信任的来源触发）时，浏览器验证工具会自动启动，我认为这也是公平的

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

1 个答案: