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

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) {&nbsp; &nbsp; event.preventDefault();

Answer 2

现在，click如果表单在页面加载时有效，您的代码仅附加侦听器。在没有其他表单行为的情况下，单击表单中的按钮会将其提交回其来源的页面，这就是它看起来像页面刷新的原因。您需要将表单检查移动到按钮单击事件处理程序内，如下所示：<script>&nbsp; &nbsp; (function() {&nbsp; &nbsp; &nbsp; &nbsp; var stripe = Stripe('pk_test_xxx');&nbsp; &nbsp; &nbsp; &nbsp; var checkoutButton = document.getElementById('checkout-button-sku_xxx');&nbsp; &nbsp; &nbsp; &nbsp; checkoutButton.addEventListener('click', function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if($('#tcform')[0].checkValidity()){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // When the customer clicks on the button, redirect&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // them to Checkout.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; stripe.redirectToCheckout({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; items: [{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; sku: 'sku_xxx',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; quantity: 1&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Do not rely on the redirect to the successUrl for fulfilling&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // purchases, customers may not always reach the success_url after&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // a successful payment.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Instead use one of the strategies described in&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // https://stripe.com/docs/payments/checkout/fulfillment&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; successUrl: window.location.protocol + '//www.xxx.com',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; cancelUrl: window.location.protocol + '//www.xxx.com',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .then(function(result) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (result.error) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // If `redirectToCheckout` fails due to a browser or network&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // error, display the localized error message to your customer.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var displayError = document.getElementById('error-message');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; displayError.textContent = result.error.message;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; })();但监听表单的submit事件可能会更好（https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit_event）：$('#tcform').on('submit', function() {&nbsp; &nbsp; &nbsp;stripe.redirectToCheckout({&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;...&nbsp; &nbsp; &nbsp;});});该submit事件仅在表单验证后才会发出。

Answer 3

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

Answer 4

这也发生在我们身上。我们已将novalidate属性（删除 HTML5 验证）添加到表单并仅通过 javascript 进行验证。    <form id="tcform" novalidate>     ...         </form>