确保您的表单被提交并由您附加的任何函数验证的最简单方法不是调用表单的submit() 方法,而是调用其提交按钮的click() 方法.
考虑以下形式:
<form id="bar" method="post" action="/echo/html/">
<input type="text" id="foo" name="foo">
<input type="submit" value="Submit">
</form>
现在,点击提交并没有什么特别的。但是,如果您想在将任何内容发送到服务器之前确保文本输入具有值怎么办?您可以按如下方式完成:
function validateBarForm() {
var txt = this.querySelector("input[type=text]");
if (txt.value == "") {
txt.style.outline = "solid red 2px";
return false;
}
}
document.getElementById("bar").onsubmit = validateBarForm;
现在,如果您单击提交,表单将不会以空白文本输入提交。但是,如果您以编程方式提交表单怎么办?让我们先添加一个链接...
<a href="#" id="submit-bar">submit form</a>
请注意,此链接在表单标签的外部。我们可以简单地附加一个提交函数:
function submitBarForm() {
document.getElementById("bar").submit();
}
document.getElementById("submit-bar").onclick = submitBarForm;
我们点击“提交表格”然后...哎呀!不执行验证功能!有几种方法可以绕过这个问题,但我最喜欢的是让 JavaScript 模拟对提交按钮的点击。我发现这比硬编码对验证函数的调用更能适应变化。
function submitBarForm() {
document.querySelector("#bar input[type=submit]").click();
}
现在,当您单击该链接时,表单将被验证,如果所有内容都检查,则它也已提交。但不要相信我的话——前往 jsfiddle.net 并亲自看看。