проверка формы и отправка не работает должным образом - PullRequest
0 голосов
/ 17 марта 2020

У меня проблема с проверкой и отправкой формы. Несмотря на то, что он может проверить обязательные поля с помощью 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...