通過表單驗證后頁面未重定向到條帶結帳

Question

我正在使用 HTML 5 必需屬性進行表單驗證。 現在我想要的是，如果表單通過了 HTML 5 驗證，它應該將用戶帶到條帶結帳（我特意在下面的代碼中為 SO 問題輸出信息）。

現在，如果表單未通過驗證，則不會處理提交，這很好。 但是在我完成表單並提交表單后，它並沒有將我帶到條紋結帳頁面，它只是刷新頁面。 我究竟做錯了什么？

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

Answer 1

您想阻止提交表單的默認行為。 所以這樣做：

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

...

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

參考

• 防止表單提交默認
• 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

它也發生在我們身上。

我們在表單中添加了novalidate屬性（刪除了 HTML5 驗證）並僅通過 javascript 對其進行驗證。

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

Answer 4

正如 Jannes Botis 所說，您可以使用preventDefault 。 您也可以從submit事件中在 eventHandler 上返回false ，這也將取消表單提交。 參考： https : //www.geeksforgeeks.org/when-to-use-preventdefault-vs-return-false-in-javascript/