Question

通常会指示在声明form元素时将表单发布到何处。

例如这样的东西，

<form action="http://127.0.0.1:3000/myApp" method="POST">

但是，如果我在发布表单之前使用JavaScript对其进行验证，我不确定该怎么做。

下面的简化测试代码检查文本输入元素是否为空。如果未填写输入元素，则会警告用户该表单无效。如果不为空，则应将表单的内容发送到节点。但是我不确定如何从函数内部执行此操作。我将使用Express，但我处于设置此功能的初始阶段。

"use strict";

function submitIfValid() {
    if(document.querySelector('input').value != '') {
        // The form is valid.  What instruction sends it to node?        
    } else {
        alert('form not valid');
    }
}

<form onsubmit="submitIfValid()">

    <input type="text" name="fieldOne"><br>

    <input type="submit">

</form>

Answer 1

只需在表单上调用.submit()，即可处理提交，而不会再次触发onsubmit处理程序。

"use strict";

let form = document.querySelector("#form");

form.addEventListener("submit", submitIfValid)

function submitIfValid(event) {
    event.preventDefault();
    if(document.querySelector('input').value != '') {
        form.submit();
    } else {
        alert('form not valid');
    }
}

<form id="form" action="http://127.0.0.1:3000/myApp" method="POST">

    <input type="text" name="fieldOne"><br>

    <input type="submit">

</form>

您还需要使用event.preventDefault()，以便即使表单未经验证也不会提交。

如果您想在后台提交表单，请使用fetch向action发出POST请求：

"use strict";

let form = document.querySelector("#form");

form.addEventListener("submit", submitIfValid)

function submitIfValid(event) {
  event.preventDefault();
  if (document.querySelector('input').value != '') {
    const data = new URLSearchParams();
    for (const pair of new FormData(form)) {
      data.append(pair[0], pair[1]);
    }

    fetch(url, {
        method: 'post',
        body: data,
      })
      .then(...);
  } else {
    alert('form not valid');
  }
}

<form id="form" action="http://127.0.0.1:3000/myApp" method="POST">

  <input type="text" name="fieldOne"><br>

  <input type="submit">

</form>

如何在验证器函数中使用JS提交表单

1 个答案: