我有一个包含一些必需字段的页面。一个附件文件字段，一些文本框，包括检查电子邮件的有效性和匹配性并确保不为空，以及选择一个复选框以确保用户确认条款和条件。
我遇到的问题是，如果我不填写表格并单击"立即购买"，它确实会执行验证，但随后会重定向用户进行结账。如果表单上存在验证，我们如何才能使提交按钮不重定向？我使用html中的required和一些javascript进行电子邮件验证。
HTML FROM
<form id="tcform">
<p>
<b>Attach your CV:</b> (.doc, .docx, .pdf, .txt, .rtf)
</p>
<input type="file" id="uploadCV" required/>
<br/><br/>
<div class="formcontainer">
<label for="email"><b>Email:</b></label>
<input type="input" id="email" name="email" />
<p id="resultEmail"></p>
<label for="email"><b>Confirm Email:</b></label>
<input type="input" id="confirmEmail" name="confirmEmail" />
<p id="resultConfirmEmail"></p>
<label for="job"><b>Desired Job Position:</b></label>
<input type="input" id="job" name="job" required />
</div>
<br/>
<p><b>Quantity:</b> 1</p>
<b class="price">Price:</b> £40
<button type="submit" class="btn btn-default buynow"
id="checkout-button-sku_xxx" role="link">
Buy Now
</button>
<p class="tcparagraph"><i style="font-size:small">Expected Completion Time: Within 10 working days</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>
</form>
Javascript
<script>
var file = document.getElementById('uploadCV');
file.onchange = function(e) {
var ext = this.value.match(/.([^.]+)$/)[1];
switch (ext) {
case 'doc':
case 'docx':
case 'pdf':
case 'txt':
case 'rtf':
break;
default:
alert('Please upload a file that matches any of these file types: .doc, .docx, .pdf, .txt, .rtf');
this.value = '';
}
};
(function() {
var stripe = Stripe('pk_test_xxxxxxxxxxxxxx');
var checkoutButton = document.getElementById('checkout-button-sku_xxx');
checkoutButton.addEventListener('click', function () {
// 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/services/cv-rewrite',
cancelUrl: window.location.protocol + '//www.xxx.com/services/cv-rewrite',
})
.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;
}
});
});
})();
function validateEmail(email) {
var re = /^(([^<>()[]\.,;:s@"]+(.[^<>()[]\.,;:s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$/;
return re.test(email);
}
function validate() {
var $result = $("#resultEmail");
var $confirmResult = $("#resultConfirmEmail");
var email = $("#email").val();
var confirmEmail = $("#confirmEmail").val();
$result.text("");
if (validateEmail(email)) {
if (email == confirmEmail) {
$confirmResult.text("");
return true;
} else {
$confirmResult.text("Your email and confirm email do not match");
$confirmResult.css("color", "red");
}
} else {
$result.text("You have not provided a valid email");
$result.css("color", "red");
}
return false;
}
$(".buynow").on("click", validate);
window.onload = function(){
var label = document.getElementsByClassName('close');
for (var i = 0; i<label.length; i++) {
label[i].onclick = function () {
var el = (this.parentNode);
el.parentNode.removeChild(el);
};
}
};
</script>
您应该在条带重定向之前调用您的validate方法，还应该检查表单默认验证(form.checkValidity()(中没有手动检查validate方法的内容。
checkoutButton.addEventListener('click', function(event) {
event.preventDefault();
// When the customer clicks on the button, redirect
// them to Checkout if validations pass.
const isFormValid = checkoutButton.form.checkValidity() && validate();
if (!isFormValid) return; // or show message or whatever else you want
stripe.redirectToCheckout({
items: [{
sku: 'sku_xxx',
quantity: 1
}],
...