Javascript 条带元素：如何验证卡元素在客户端不是空的？

Stripe建议使用

change

事件对

卡

元素进行客户端验证：

cardElement.on('change', function(event) {
  if (event.complete) {
    // enable payment button
  } else if (event.error) {
    // show validation to customer
  }
});

但是，如果用户从不编辑/更改卡片元素，则这种方法无法确定该卡片元素是否无效。我总是可以尝试使用

confirmCardPayment

提交付款，但这是低效的。此验证应该可以在客户端进行

我可以通过让付款表单默认为错误状态来解决这个问题，然后在用户第一次更改卡时解决（或不解决）。但是，这并不方便，因为这需要我将我的应用程序代码中的“您的卡号不完整”错误消息国际化，而不是依赖于条带

---

理想情况下，我可以同步检查card元素是否存在错误，或者至少同步触发change事件，但这两者都不可能。Stripe.js根据元素的状态将几个类应用于每个Stripe元素的容器：

• StripeElement——完成

• StripeElement——空的

• StripeElement——焦点

• StripeElement--无效

• StripeElement——webkit自动填充（仅限Chrome和Safari）

您可以在中阅读有关这些类的更多信息，包括如何自定义它们

听起来，检查

StripeElement--empty

类对于您的用例可能就足够了。您可以这样做：

const-cardlementcontainer=document.querySelector（“#card-element”）；
让cardElementEmpty=cardElementContainer.classList.contains（'StripeElement--empty'）；
//根据cardElementEmpty是真是假来做事

还有更多类似“就绪”或“单击”的事件，条带接受it@MohamedGhoneim

单击

没有帮助，因为如果用户从未单击过该怎么办<代码>就绪可以工作，但该事件不提供任何错误信息。这很有帮助，谢谢！但是，这不是理想的解决方案，因为此接口没有以与

change

事件的

error

对象相同的方式向我提供适当的国际化错误消息。但是可能没有办法得到这个结果。通常你会调用一个使用Stripe元素的方法（比如

Stripe.confirmCardPayment

），如果元素为空，你会得到

错误

，你可以用与

更改

事件错误类似的方式来处理。这种方法对您的用例不起作用吗？我认为对于

confirmCardPayment

，您需要提交有效的

PaymentIntent

，而我希望在设置

PaymentIntent

之前验证卡。