logo标签列表

表单验证通过后页面未重定向至Stripe结账页面

javascripthtml
6
我正在使用HTML 5的required属性进行表单验证。现在，我希望的是，如果表单通过了HTML 5验证，它应该将用户带到Stripe结账页面（我故意在下面的代码中用xxx替换了信息）。
现在，如果表单没有通过验证，提交操作不会处理，这很好。但是，在我完成表单并提交表单后，它并没有把我带到Stripe结账页面，而只是刷新了页面。我做错了什么？
<form id="tcform">

<p><b>Quantity:</b> 1</p>
<b class="price">Price:</b> <s>£xx</s> <span style="color: red;">£xx</span>
<button class="btn btn-default buynow" id="checkout-button-sku_xxx" role="link">
     Buy Now
    </button>
    <p>
    <i style="font-size:small">Limited time offer</i>
    </p>

  <p class="tcparagraph">
  <input id="field_terms" type="checkbox" required name="terms"> I accept the <u><a href="Terms" id="tclink">Terms and Conditions</a></u></p>

  <div id="error-message"></div>
  </form>

<script>
    (function() {

        var stripe = Stripe('pk_test_xxx');

        var checkoutButton = document.getElementById('checkout-button-sku_xxx');

        checkoutButton.addEventListener('click', function() {
            // When the customer clicks on the button, redirect
            // them to Checkout.

            const isFormValid = checkoutButton.form.checkValidity();

            if(isFormValid==true) {

            stripe.redirectToCheckout({
                    items: [{
                        sku: 'sku_xxx',
                        quantity: 1
                    }],

                    // Do not rely on the redirect to the successUrl for fulfilling
                    // purchases, customers may not always reach the success_url after
                    // a successful payment.
                    // Instead use one of the strategies described in
                    // https://stripe.com/docs/payments/checkout/fulfillment
                    successUrl: window.location.protocol + '//metis-online.com/courses/course-BRFAITC009-order-confirmation',
                    cancelUrl: window.location.protocol + '//metis-online.com/order-cancelled',
                })
                .then(function(result) {
                    if (result.error) {
                        // If `redirectToCheckout` fails due to a browser or network
                        // error, display the localized error message to your customer.
                        var displayError = document.getElementById('error-message');
                        displayError.textContent = result.error.message;
                    }
                });
            }

        });
    })();
</script>
当脚本加载时，您正在检查表单的有效性。我猜此时表单无效，您实际上从未设置事件侦听器。 - mlibby
@mlibby，你能给我展示一些示例代码，这样我就可以看到你的意思并标记你的答案吗？ :) - BruceyBandit
4个回答
10
你想要防止表单的默认提交行为。请按照以下方式操作：

使用以下代码：

event.preventDefault();

checkoutButton.addEventListener('click', function(event) {

...

if(isFormValid==true) {
    event.preventDefault();

参考资料

2

现在你的代码只有在页面加载时表单有效时才会附加click监听器。在没有其他表单行为的情况下，单击表单中的按钮会将其提交回到它来自的页面，这就是为什么看起来像是刷新页面。

你需要将表单检查移动到按钮单击事件处理程序中，如下所示：

<script>
    (function() {
        var stripe = Stripe('pk_test_xxx');
        var checkoutButton = document.getElementById('checkout-button-sku_xxx');

        checkoutButton.addEventListener('click', function() {
            if($('#tcform')[0].checkValidity()){

                // When the customer clicks on the button, redirect
                // them to Checkout.
                stripe.redirectToCheckout({
                    items: [{
                        sku: 'sku_xxx',
                        quantity: 1
                    }],

                    // Do not rely on the redirect to the successUrl for fulfilling
                    // purchases, customers may not always reach the success_url after
                    // a successful payment.
                    // Instead use one of the strategies described in
                    // https://stripe.com/docs/payments/checkout/fulfillment
                    successUrl: window.location.protocol + '//www.xxx.com',
                    cancelUrl: window.location.protocol + '//www.xxx.com',
                })
                .then(function(result) {
                    if (result.error) {
                        // If `redirectToCheckout` fails due to a browser or network
                        // error, display the localized error message to your customer.
                        var displayError = document.getElementById('error-message');
                        displayError.textContent = result.error.message;
                    }
                });
            }
        });
  })();

但是更好的方法可能是监听表单的 submit 事件 (https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLFormElement/submit_event):

$('#tcform').on('submit', function() {
     stripe.redirectToCheckout({ 
         ...
     });
});
< p >“submit”事件仅在表单验证后触发。< /p >
似乎不起作用。我已经尝试了你提供的解决方案以及许多其他方法。让我更新我的代码。 - BruceyBandit
我现在改成通过按钮尝试，但是看不出我做错了什么。也许这是因为我理解不够深入的同样问题。我不是全职开发人员，只是为一个简单的网页编写一些代码 :) - BruceyBandit
1

我们也遇到了这个问题。

我们在表单中添加了novalidate属性（去除HTML5验证），并仅通过JavaScript进行验证。

    <form id="tcform" novalidate>
    ...
    </form>
1
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接