通过JavaScript强制HTML表单验证

Force HTML form validation via JavaScript

本文关键字：表单 验证 HTML 强制 JavaScript 通过      更新时间：2023-09-26

我创建了一个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是进行验证的地方。

我的问题是：我能以编程方式强制onSubmit（）以便弹出验证窗口吗？我必须明确表示，我不想创建JavaScript表单验证，即使用警报；相反，当您单击提交时，请使用JavaScript强制执行HTML验证，如下所示：https://jsfiddle.net/qdzxfm9u/

您只需将按钮的类型更改为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
这样，它就无法按预期工作。

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

也许是这样的：

var form = document.getElementById("formExample");
function form1() {
  form.action="example1.php";
}
function form2() {
  form.action="example2.php";
}
<form id="formExample">
  <input type="text" id="input1" required>
  <input type="submit" onClick="form1()" value="Form Action 1" />
  <input type="submit" onClick="form2()" value="Form Action 2" />
</form>

如何制作一个dropdown列表-可以是单选按钮-包含表单中的两个操作和一个提交按钮，如此JS Fiddle中所示，然后在表单submit 上具有一个功能

var form = document.getElementById("formExample"),
    select = document.getElementById("slct");
form.addEventListener('submit', function() {
  if (select.value == 1) {
    form.action = "example1.php";
  } else {
    form.action = "example2.php";
  }
  // alert for demo only
  alert(form.action);
  form.submit();
});
<form id="formExample">
  <input type="text" id="input1" required>
  <select id="slct" required>
    <option></option>
    <option value="1">Form Action 1</option>
    <option value="2">Form Action 2</option>
  </select>
  <button type="submit">Submit</button>
</form>

相关文章：