通过JavaScript强制HTML表单验证

Question

我创建了一个HTML表单,它有两个按钮(而不是提交按钮),每个按钮都以编程方式将表单发送到一个唯一的表单操作地址.

<form id="formExample">
<input type="text" id="input1" required>
<label type="button" onClick="form1()">Form Action 1</label>
<label type="button" onClick="form2()">Form Action 2</label>
</form>

脚本:

form = document.getElementById("formExample");

function form1() {
    form.action="example1.php";
    form.submit();
}
function form2() {
    form.action="example2.php";
    form.submit();
}

运作良好,响应您按下的按钮.但是,之前使用相同的html表单验证(使用"提交"按钮时),不再显示提示,无论是否有输入,表单都会发送.

我已经阅读过因为我以编程方式调用form.submit(),它绕过了表单的onSubmit()函数,这是验证发生的地方.

我的问题是:我可以以编程方式强制onSubmit(),以便我弹出验证吗？我必须明确表示我不想创建JavaScript表单验证,即使用警报; 相反,当您单击提交时,使用JavaScript强制执行此处的HTML验证:https://jsfiddle.net/qdzxfm9u/

Answer 1

您只需将按钮的类型更改为并从 JS 部分submit删除即可。form.submit()

所以 HTML 部分就变成了：

<form id="formExample">
<input type="text" id="input1" required>
<button type="submit" onClick="form1()">Form Action 1</button>
<button type="submit" onClick="form2()">Form Action 2</button>
</form>

这样，点击任何按钮都会自行提交，但之前会执行 JS 部分：

form = document.getElementById("formExample");

function form1() {
    form.action="example1.php";
}
function form2() {
    form.action="example2.php";
}

编辑

警告：我最初的解决方案基于 OP HTML 部分的副本，其中“伪按钮”使用了一个奇怪的元素<label type="input"...>，所以我读（太快）就好像它是一样<button type="button"...>，只是type从input改为submit！
这样一来，就无法达到预期的效果了。

现在在上面的代码中已更正。