代码之家 › 专栏 › 技术社区 › DR01D

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

forms javascript

1

DR01D · 技术社区 · 8 年前

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

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

下面的简化测试代码检查文本输入元素是否为空。如果没有填写输入元素,它会提醒用户表单无效。如果它不是空的,它应该将表单的内容发送到节点。但我不知道如何从函数内部做到这一点。我要用快递,但我在这个设置的初始阶段。

"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>

1 回复 | 直到 8 年前

1

Luca Kiebel 8 年前

打个电话就行了 .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

"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>