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

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

我添加了一个ID为stripe-errors的div

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;
}

这样做的局限性是，您只能在一个地方显示错误消息，并且错误消息没有明确说明它们所引用的字段，尽管在上下文中可能很清楚。为了清晰起见，您可以使用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?
  }
}

Answer 2

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

如何在javascript中显示api错误

2 个答案: