如何在 javascript 中显示 api 个错误

Question

我正在使用 stripe，使用在他们页面上找到的代码创建一个新帐户。一切正常，但是当有人在字段中插入错误数据并且我们按下提交时没有任何反应，我可以在控制台中看到：

{
  "error": {
    "message": "This value must be greater than 1900 (it currently is '1670').",
    "param": "account[individual][dob][year]",
    "type": "invalid_request_error"
  }

这是 api 的回复（我试图在出生日期中输入 1670）。我怎样才能在页面上为用户显示它？

这是我的 html 页面代码：

<form class="my-form"  method="post" role="form">
    {% csrf_token %}
  <input type="hidden" name="token" id="token">
  <label>
    <span>First Name</span>
    <input class="inp-first-name" name="first_name" required>
  </label>

  <label>
    <span>Last Name</span>
    <input class="inp-last-name" name="last_name" required>
  </label>

    <label>
    <span>dob year</span>
    <input class="inp-dob-year" name="dob_year" required>
  </label>

    <label>
    <span>dob month</span>
    <input class="inp-dob-month" name="dob_month" required>
  </label>

    <label>
    <span>dob day</span>
    <input class="inp-dob-day" name="dob_day" required>
  </label>

  <fieldset>
    <legend>Address</legend>
    <label>
      <span>Street Address Line 1</span>
      <input class="inp-street-address1" name="street_address1" required>
    </label>
       <label>
      <span>Street Address Line 2</span>
      <input class="inp-street-address2" name="street_address2">
    </label>
    <label>
      <span>City</span>
      <input class="inp-city" name="city" required>
    </label>
    <label>
      <span>State</span>
      <input class="inp-state" name="state" required>
    </label>
    <label>
      <span>Postal Code</span>
      <input class="inp-zip" name="zip" required>
    </label>

      {{ form }}
  </fieldset>

  <button type="submit">Submit</button>
</form>
        </table>
{% endblock %}

{% block body_scripts %}
<script>
const stripe = Stripekey
const myForm = document.querySelector('.my-form');
myForm.addEventListener('submit', handleForm);


async function handleForm(event) {
  event.preventDefault();

  const result = await stripe.createToken('account', {


    legal_entity: {
        type:'individual',
      first_name: document.querySelector('.inp-first-name').value,
      last_name: document.querySelector('.inp-last-name').value,

        dob:{
      year: parseInt(document.querySelector('.inp-dob-year').value),
      month: parseInt(document.querySelector('.inp-dob-month').value),
      day: parseInt(document.querySelector('.inp-dob-day').value),
          },


      address: {
        line1: document.querySelector('.inp-street-address1').value,
          line2: document.querySelector('.inp-street-address2').value,
        city: document.querySelector('.inp-city').value,
        state: document.querySelector('.inp-state').value,
        postal_code: document.querySelector('.inp-zip').value,
      },
    },
    tos_shown_and_accepted: true,
  });

  if (result.token) {
    document.querySelector('#token').value = result.token.id;
    myForm.submit();
  }

}

</script>

我正在使用 python 构建网站，所以我对 javascript 的了解有限。任何帮助将不胜感激。

Answer 1

您应该在与请求相同的函数中获取错误（为错误创建一个变量 json 并解析它以获得您想要的确切响应），然后获取元素的元素想要显示错误消息并指定要显示的响应的值。你可以使用一些 var x = document.getElementById(variable); x.value = variable with the error; }

Answer 2

您可以通过添加新的 HTML 元素来包含错误消息并将 innerText 设置为错误消息来实现此目的。

我添加了一个 div，id 为 stripe-errors

if (result.token) {
  document.querySelector('#token').value = result.token.id;
  myForm.submit();
} else if (result.error) {
  let stripeErrors = document.getElementById('stripe-errors');

  stripeErrors.innerText = result.error.message;
}

这样做的局限性在于您只有一个地方可以显示错误消息，并且错误消息没有明确说明它们引用的是哪个字段，尽管在上下文中它可能足够清楚。要 crystal 清楚，您可以使用 error.param 将 account[individual][dob][year] 映射到 .inp-dob-year 输入字段或另一个元素以显示错误消息。

这看起来像：

if (result.token) {
  document.querySelector('#token').value = result.token.id;
  myForm.submit();
} else if (result.error) {
  // create an object as a map from the error.param to the elements that should be used to display error messages
  const errorTypeFieldMap = {
    'account[individual][dob][year]': '.inp-dob-year-error'
  }

  let errorElementSelector = errorTypeFieldMap[result.error.param];

  if (errorElementSelector !== undefined) {
    let errorElement = document.querySelector(errorElementSelector);

    errorElement.innerText = result.error.message;
  } else {
    // display a generic error?
  }
}

如何在 javascript 中显示 api 个错误

how to display api errors in javascript

javascript

error-handling

stripe-connect