时间戳

首页 > 解决方案 > 如何防止表单条带验证

javascript - 如何防止表单条带验证

问题描述

我仅将条带元素直接集成到 Woocommerce 覆盖（payment.php 页面）中，提交表单时，如果我检查所有内容，但我没有填写信用卡号，我没有任何错误，他验证订单（在 Stripe 上，我有一个付款错误）。

如果我只在银行详细信息中输入 2 位数字，则会出现错误。但如果它是空的，我就没有。我寻找，我寻找，但我找不到。有人可以解释一下吗？

非常感谢，

这是源代码

var stripe = Stripe('pk_test_');

// Create an instance of Elements.
var elements = stripe.elements();

// Custom styling can be passed to options when creating an Element.
// (Note that this demo uses a wider set of styles than the guide below.)
var style = {
  base: {
    color: '#32325d',
    fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
    fontSmoothing: 'antialiased',
    fontSize: '16px',
    '::placeholder': {
      color: '#aab7c4'
    }
  },
  invalid: {
    color: '#fa755a',
    iconColor: '#fa755a'
  }
};

// Create an instance of the card Element.
var card = elements.create('card', {style: style});

// Add an instance of the card Element into the `card-element` <div>.
card.mount('#card-element');

// Handle real-time validation errors from the card Element.

  card.on("change", function(result) {
    var displayError = document.querySelector("displayError");
    displayError.querySelector(".token").innerText = result.token.id;
    displayError.classList.add("submitted");
    result.complete("success");
  });

// // Handle form submission.
var form = document.getElementById('payment-form');

form.addEventListener('submit', function(event) {
  event.preventDefault();

  stripe.createToken(card).then(function(result) {
    if (result.error) {
      // Inform the user if there was an error.
      var errorElement = document.getElementById('card-errors');
      errorElement.textContent = result.error.message;
    } else {
      // Send the token to your server.
      document.cookie = "stripe_tkn=" + result.token.id;
      stripeTokenHandler(result.token);
    }
  });

  
});

  

// Submit the form with the token ID.
function stripeTokenHandler(token) {
  // Insert the token ID into the form so it gets submitted to the server
  var form = document.getElementById('payment-form');
  var hiddenInput = document.createElement('input');
  hiddenInput.setAttribute('type', 'hidden');
  hiddenInput.setAttribute('name', 'stripeToken');
  hiddenInput.setAttribute('value', token.id);
  form.appendChild(hiddenInput);
  document.cookie = "stripe_tkn=" + result.token.id;
      stripeTokenHandler(result.token);
  // Submit the form
  form.submit();
 }

标签： javascriptwoocommercestripe-payments

解决方案

如果条带元素为空，则条带将特定的 CSS 代码应用于该元素。

您可以使用 query.selector 对此进行测试：

  const checkForCreditCardNumber = () => {
   if(document.querySelector('.StripeElement--empty')===null){return}
     let message = 'Please enter a credit card number'
     this.props.updateMessage(message)
     this.props.changeMessageColor('red')
  }

推荐阅读