通过JavaScript强制进行HTML表单验证

我创建了一个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>

工作正常，对你按下的按钮做出反应。但是，以前使用“提交”按钮时使用的html表单验证不再显示提示，并且无论是否有输入，表单都会发送

我读过这篇文章，因为我是以编程方式调用form.submit的，所以它绕过了表单的onSubmit函数，这是进行验证的地方

---

我的问题是：我是否可以通过编程强制onSubmit，以便弹出验证窗口？我必须明确我不想创建JavaScript表单验证，即使用警报；相反，当您单击submit时，请使用JavaScript强制执行此处的HTML验证：

可能类似于以下内容：

var form=document.getElementByIdformExample； 函数形式1{ action=example1.php； } 函数形式2{ action=example2.php； } 制作一个下拉列表——可以是单选按钮——包含两个表单操作，一个提交按钮，如图所示，然后在表单提交上有一个功能，怎么样

var form=document.getElementByIdformExample， select=document.getElementByIdslct； form.addEventListener'submit'，函数{ 如果select.value==1{ form.action=example1.php； }否则{ form.action=example2.php； } //警报仅用于演示 行动； 提交表格； }; 表格行动1 表格行动2 提交

---

您只需将按钮的类型更改为submit，然后从JS部件中删除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>

编辑

警告：我最初的解决方案基于OP HTML部分的一个副本，其中伪按钮使用了一个奇怪的元素，因此我读得太快，就好像它是一样，只是简单地将类型从input更改为submit！ 这样，它就不能像预期的那样工作

---

现在已在上述代码中更正。

您只需将按钮的类型从button更改为submit，然后从JS部分删除表单.submit。如果您可以使用JQuery，请查看.Cheers@cFreed，这就解决了问题！如果您愿意在回答部分再次提供，我将很乐意接受作为解决方案。谢谢完成了！很高兴帮忙，很高兴你接受我的回答：“DANAN04，你可以考虑代替表单动作2，因为后者不是一个有效的HTML，把你的表单HTML放在身体里面，点击检查点击任何一个按钮自己提交，但是在执行JS部分之前，他必须执行JS部分，因为他需要决定哪些操作必须附加到form@Mi-创造力。我不明白你的意思。我同意必须执行JS部分，但事情就是这样。我的意思是，如果不执行JS部分，那么表单-example1.php或example2.php的action=属性会是什么？考虑到它只通过JS？@Mi设置。严格响应，如果没有执行JS部分，那么我们知道默认值适用，即当前脚本用作操作值。但在目前的情况下，这种情况不会发生，因为它的编写使得每个submit按钮都有自己的onclick事件触发所需的处理程序。请耐心听我说，因此JS部分将在单击时执行，然后表单将根据您的代码提交，请检查此链接-点击运行执行-这正是您的带有一点CSS的代码，我想知道它是否显示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>

form = document.getElementById("formExample");

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