时间戳

首页 > 解决方案 > Next.js 获取验证失败将表单数据发送到联系表单 7 API

javascript - Next.js 获取验证失败将表单数据发送到联系表单 7 API

问题描述

我正在尝试将数据发送到 Contact Form 7 API，但在发送表单时出现错误：

{into: "#", status: "validation_failed", message: "One or more fields have an error. Please check and try again.", posted_data_hash: "", invalid_fields:

表单上的输入字段具有所有正确的名称值，例如name="your-name"

我正在发送这样的表单数据：

  async function handleSubmit(e) {
    e.preventDefault();

    const formData = {};

    Array.from(e.currentTarget.elements).forEach((field) => {
      if (!field.name) return;
      formData[field.name] = field.value;
    });

    await fetch(
      "https://domain.tld/cms/wp-json/contact-form-7/v1/contact-forms/1234/feedback",
      {
        body: JSON.stringify(formData),
        headers: {
          "content-type": "multipart/form-data",
        },
        method: "POST",
      }
    )
      .then((response) => response.json())
      .then((data) => {
        console.log(data);
      })
      .catch((error) => {
        console.error("Error:", error);
      });
  }

我已经在 Postman 中尝试过，它可以正常工作并发送状态消息。我不知道我在这里做错了什么。

这是表格：

<Form onSubmit={handleSubmit}>
    <Form.Group controlId="your-name">
      <Form.Control
        required
        type="text"
        placeholder="Your name"
        name="your-name"
      />
      <Form.Control.Feedback type="invalid">
        Please enter your name
      </Form.Control.Feedback>
    </Form.Group>
    <Form.Group controlId="your-email">
      <Form.Control
        required
        type="email"
        placeholder="Your email address"
        name="your-email"
      />
      <Form.Control.Feedback type="invalid">
        Please enter your email
      </Form.Control.Feedback>
    </Form.Group>
    <Form.Group controlId="your-message">
      <Form.Control
        as="textarea"
        cols={30}
        rows={6}
        placeholder="Write your message..."
        name="your-message"
      />
    </Form.Group>
    <Button
      type="submit"
      variant="primary"
      size="lg"
    >
      Send Message
      <span></span>
    </Button>
  </Form>

标签： javascriptapipostnext.jscontact-form-7

解决方案

如果您使用任何以您Content-Type开头的内容，multipart/*则必须设置边界，并且您的代码中没有边界。

为了克服这个问题，只需使用FormData类const formData = new FormData()和附加值formData.append(key, value)，这样您将拥有一个 FormData 实例，因此 Axios 可以确定您发送的数据类型，并且它可以自动设置 Content-Type 与边界。

这是应该工作的代码，但我还没有测试过：

async function handleSubmit(e) {
  e.preventDefault();

  const formData = new FormData();

  Array.from(e.currentTarget.elements).forEach((field) => {
    if (!field.name) return;
    formData.append(field.name, field.value);
  });

  await fetch(
    "https://domain.tld/cms/wp-json/contact-form-7/v1/contact-forms/1234/feedback",
    {
      body: formData,
      method: "POST",
    }
  )
    .then((response) => response.json())
    .then((data) => {
      console.log(data);
    })
    .catch((error) => {
      console.error("Error:", error);
    });
}

推荐阅读