我正在使用 HTML 5 必需的屬性進(jìn)行表單驗(yàn)證。現(xiàn)在我想要的是，如果表單已通過 HTML 5 驗(yàn)證，它應(yīng)該將用戶帶到條帶結(jié)賬（我特意在下面的代碼中為 SO 問題添加了 xxx 信息）。現(xiàn)在，如果表單未通過驗(yàn)證，則不會(huì)處理提交，這很好。但是，在我完成表單并提交表單后，它不會(huì)將我?guī)У綏l紋結(jié)帳頁面，它只是刷新頁面。我究竟做錯(cuò)了什么？<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', })
4 回答
蕭十郎
TA貢獻(xiàn)1815條經(jīng)驗(yàn) 獲得超13個(gè)贊
您想要阻止提交表單的默認(rèn)行為。所以這樣做：
checkoutButton.addEventListener('click', function(event) {
...
if(isFormValid==true) {
event.preventDefault();
回首憶惘然
TA貢獻(xiàn)1847條經(jīng)驗(yàn) 獲得超11個(gè)贊
現(xiàn)在，click如果表單在頁面加載時(shí)有效，您的代碼僅附加偵聽器。在沒有其他表單行為的情況下，單擊表單中的按鈕會(huì)將其提交回其來源的頁面，這就是它看起來像頁面刷新的原因。
您需要將表單檢查移動(dòng)到按鈕單擊事件處理程序內(nèi)，如下所示：
<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;
}
});
}
});
})();
但監(jiān)聽表單的submit事件可能會(huì)更好（https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit_event）：
$('#tcform').on('submit', function() {
stripe.redirectToCheckout({
...
});
});
該submit事件僅在表單驗(yàn)證后才會(huì)發(fā)出。
富國(guó)滬深
TA貢獻(xiàn)1790條經(jīng)驗(yàn) 獲得超9個(gè)贊
你可以使用preventDefault。您也可以只false從事件返回 eventHandler?submit，這也將取消表單提交。
交互式愛情
TA貢獻(xiàn)1712條經(jīng)驗(yàn) 獲得超3個(gè)贊
這也發(fā)生在我們身上。
我們已將novalidate屬性（刪除 HTML5 驗(yàn)證）添加到表單并僅通過 javascript 進(jìn)行驗(yàn)證。
????<form?id="tcform"?novalidate> ????... ????????</form>
- 4 回答
- 0 關(guān)注
- 167 瀏覽
添加回答
舉報(bào)
0/150
提交
取消