javascript - 通过 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

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

因此 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 !
这样，它无法按预期工作。

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