У меня проблема с проверкой и отправкой формы. Несмотря на то, что он может проверить обязательные поля с помощью HTML 5 после нажатия кнопки «Купить сейчас», возникают две проблемы:
1: я могу отправить форму, даже если поле электронной почты пустое и проверка javascript отражает это. Что должно произойти, так это то, что необходимо успешно подтвердить действительный адрес электронной почты и соответствующий адрес электронной почты, а также другие поля, введенные для формы.
2: Пользователь не переходит на страницу оформления заказа. Код, который я взял из их кодовой базы. Если я удаляю все проверки и нажимаю «Купить сейчас», это работает, но не с проверкой.
<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> £20
<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 7 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>
</div>
</div>
</div>
<!-----------Footer------->
<section id="footer">
<div>
<a href="https://www.websitepolicies.com/policies/view/OHIAD28w">Terms And Condition</a>
<a href="https://www.websitepolicies.com/policies/view/No06yyaa">Privacy Policy</a>
<a href="https://www.websitepolicies.com/policies/view/TxxiHIjT">Cookies Policy</a>
</div>
<p>METIS © 2020 All Rights Reserved</p>
</section>
<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 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;
}
(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) return true;
if(validate()==true && 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/services/service-CVREW211392-order-confirmation.php?email=' + $("#email").val(),
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>