通过表单验证后页面未重定向到条带结帐

Question

我正在使用 HTML 5 必需的属性进行表单验证。现在我想要的是，如果表单已通过 HTML 5 验证，它应该将用户带到条带结账（我特意在下面的代码中为 SO 问题添加了 xxx 信息）。现在，如果表单未通过验证，则不会处理提交，这很好。但是，在我完成表单并提交表单后，它不会将我带到条纹结帐页面，它只是刷新页面。我究竟做错了什么？<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',                })

Answer 1

您想要阻止提交表单的默认行为。所以这样做：

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

...

if(isFormValid==true) {

    event.preventDefault();

Answer 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/en-US/docs/Web/API/HTMLFormElement/submit_event）：

$('#tcform').on('submit', function() {

     stripe.redirectToCheckout({ 

         ...

     });

});

该submit事件仅在表单验证后才会发出。

Answer 3

你可以使用preventDefault。您也可以只false从事件返回 eventHandler submit，这也将取消表单提交。

Answer 4

这也发生在我们身上。

我们已将novalidate属性（删除 HTML5 验证）添加到表单并仅通过 javascript 进行验证。

    <form id="tcform" novalidate>
    ...
        </form>