我正在使用HTML 5必需属性进行表单验证。现在,我想要的是,如果表单已通过HTML 5验证,则应该将用户带到带区检出(我故意在下面的代码中xxx出信息以解决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>
答案 0 :(得分:10)
您要阻止默认行为提交表单。也是这样:
checkoutButton.addEventListener('click', function(event) {
...
if(isFormValid==true) {
event.preventDefault();
答案 1 :(得分:2)
现在,如果表单在页面加载时有效,则您的代码仅附加click
侦听器。在没有其他表单行为的情况下,单击表单中的按钮会将其提交回其来源页面,这就是为什么它看起来像页面刷新一样。
您需要像这样在按钮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
事件仅在验证表单之后才发出。
答案 2 :(得分:1)
这件事也发生在我们身上。
我们已经向表单中添加了novalidate
attribute(删除了HTML5验证),并且仅通过javascript对其进行了验证。
<form id="tcform" novalidate>
...
</form>
答案 3 :(得分:1)
As Jannes Botis said,则可以使用preventDefault
。您也可以从false
事件的eventHandler返回submit
,这也将取消表单提交。供参考,请参见:https://www.geeksforgeeks.org/when-to-use-preventdefault-vs-return-false-in-javascript/