如何在javascript中显示api错误

我正在使用stripe，使用他们页面上的代码创建一个新帐户。一切正常，但当有人在字段中插入错误数据时，我们按submit时，什么都不会发生，我可以在控制台中看到：

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

{%csrf_令牌%}
名字
姓
dob年
dob月
dob日
地址
街道地址第1行
街道地址第2行
城市
陈述
邮政编码
{{form}}
提交
{%endblock%}
{%block body_scripts%}
常量stripe=Stripekey
const myForm=document.querySelector（'.my form'）；
myForm.addEventListener（“提交”，handleForm）；
异步函数handleForm（事件）{
event.preventDefault（）；
const result=wait stripe.createToken（'帐户'{
法人实体：{
类型：'个人'，
first_name:document.querySelector（'.inp first name'）.value，
姓氏：document.querySelector（'.inp last name'）.value，
出生日期：{
年份：parseInt（document.querySelector（'.inp dob year'）.value），
月份：parseInt（document.querySelector（'.inp dob month'）.value），
日期：parseInt（document.querySelector（'.inp dob day'）.value），
},
地址:{
第1行：document.querySelector（'.inp-street-address1'）。值，
第2行：document.querySelector（'.inp-street-address2'）。值，
城市：document.querySelector（'.inp city'）.value，
状态：document.querySelector（'.inp state'）.value，
邮政编码：document.querySelector（'.inp zip'）.value，
},
},
tos_显示_和_接受：正确，
});
if（result.token）{
document.querySelector（“#token”）.value=result.token.id；
myForm.submit（）；
}
}

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

您应该在与请求相同的函数中获取错误（为错误json创建一个变量并解析它以获得所需的准确响应），然后获取要显示错误消息的元素的元素，并指定要显示的响应的值。您可以使用一些

var x=document.getElementById（变量）；
x、 值=带有错误的变量；
}

您可以通过添加一个新的HTML元素来包含错误消息，并将

innerText

设置为错误消息来实现这一点

我添加了一个id为

条带错误的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

将

帐户[个人][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?
  }
}

---

所以基本上我必须为每个字段添加一个常量errorTypeFieldMap？我真的很抱歉，但有没有可能告诉我如何实施该计划？它应该是输入字段还是文本字段？这取决于您是希望在单个位置显示错误消息，还是希望在其引用的字段附近显示错误消息。几分钟后我会有一个例子。这里有一个例子：-我不确定Stripe可能会返回什么其他错误，必须查看他们的文档，看看还有什么，但是处理来自不同字段的错误只需要添加一个带有类的新字段，然后向

errorTypeFieldMap

添加一个条目，将

error.param

指向相应的字段。