Bootstrap форма не отменяет отправку при неудачной проверке

Question

Я пытаюсь создать форму, которая будет отправлять пользователю электронное письмо при отправке.

Дело в том, что я использовал шаблон формы Bootstrap, и когда я отправляю его с неправильными значениями телефона и почты (даже пустой номер телефона), электронное письмо все равно отправляется (с 200 ok) и успешно предупреждение отображается.

Вот мой HTML код:

<form class="needs-validation" novalidate id="paymentForm">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="firstName">First Name</label>
                                <input type="text" class="form-control" name="firstName" id="firstName" placeholder="" value="" required>
                                <div class="invalid-feedback">
                                    required Feild
                                </div>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="lastName">Lasr Name</label>
                                <input type="text" class="form-control" name="lastName" id="lastName" placeholder="" value="" required>
                                <div class="invalid-feedback">
                                    required Feild
                                </div>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="email">Email</label>
                            <input type="email" class="form-control" value="" name="email" id="email" placeholder="you@example.com" required>
                            <div class="invalid-feedback">
                                please enter a valid mail address
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="phone">Phone Number</label>
                            <input type="tel" class="form-control" value="" name="phone" placeholder="example: 050-1111111" pattern="[0]{1}[5]{1}[0-9]{8}" id="phone" required>
                            <div class="invalid-feedback">
                                please provide a valid phone number
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="address"> address</label>
                            <input type="text" class="form-control" name="address" id="address" placeholder="" required>
                            <div class="invalid-feedback">
                              please provide your address
                            </div>
                        </div>
                        <hr class="mb-4">

                        <h4 class="mb-3">payment method</h4>
                        <div class="d-block my-3">
                            <div class="custom-control custom-radio">
                                <input id="cash" value="cash" value="cash" name="paymentMethod" type="radio" class="custom-control-input" required checked>
                                <label class="custom-control-label" for="cash">cash</label>
                            </div>
                            <div class="custom-control custom-radio">
                                <input id="bit" value="bit" value="bit" name="paymentMethod" type="radio" class="custom-control-input" required>
                                <label class="custom-control-label" for="bit">Bit</label>
                            </div>
                        </div>
                        <div class="invalid-feedback">
                            please choose method
                        </div>

                        <hr class="mb-4">
                        <button class="btn btn-primary btn-lg btn-block" type="submit">continue to checkout</button>

                    </form>

, а вот мой js:

(function() {
    'use strict'
    window.addEventListener('load', function() {       
        var forms = document.getElementsByClassName('needs-validation')       
        Array.prototype.filter.call(forms, function(form) {
            form.addEventListener('submit', function(event) {

                var radioValue = $('#paymentForm input:radio:checked').val()
                if (form.checkValidity() === false) {
                    event.preventDefault();
                    event.stopPropagation();
                }
                form.classList.add('was-validated')
                var orderNumber = generateId();
                var cName = $('#firstName').val() + " " + $('#lastName').val()
                var cEmail = $('#email').val()
                var cPhone = $('#phone').val()
                var cAddress = $('#address').val()
                var cSumToPay = parseInt(localStorage.getItem("totalPrice"));
                var cProducts = JSON.parse(localStorage.getItem("products") || "[]");
                cProducts = cProducts.map(Object.values);                   
                cProducts = cProducts.join(' ');
                console.log(cProducts);
                var templateParams = {
                    order_number: orderNumber,
                    customer_name: cName,
                    products: cProducts,
                    addres: cAddress,
                    phone: cPhone,
                    customer: cEmail,
                    payment_Methode: radioValue,
                    customer_sum: cSumToPay
                };
                emailjs.send('gmail', 'orderconfirmation', templateParams)
                    .then(function(response) {
                        console.log('SUCCESS!', response.status, response.text);
                        alert('Yey! Your email was sent :)');           
                    }, function(error) {
                        console.log('error');
                        alert(error);
                    });
                event.preventDefault();
            }, false)
        })
    }, false)

}())

Буду признателен, если вы, ребята, можете мне помочь !!!

Answer 1

Этот раздел, по-видимому, является вашей единственной проверкой для проверки:

            if (form.checkValidity() === false) {
                event.preventDefault();
                event.stopPropagation();
            }

Однако event.preventDefault() и event.stopPropagation() не предотвращают попадание кода в следующий раздел. Вы можете сделать это, включив в этот момент возврат

            if (form.checkValidity() === false) {
                event.preventDefault();
                event.stopPropagation();
                return false;
            }

, или вы можете заключить остальную часть кода в else условного

            if (form.checkValidity() === false) {
                event.preventDefault();
                event.stopPropagation();
            } else {
                // your email handling code
            }

Примечание: ваш event.preventDefault() полезно, чтобы кнопка отправки не выполняла свое поведение по умолчанию при отправке формы, а event.stopPropagation() просто не даст событию всплыть на родительские элементы (которые вам, вероятно, не нужны). См .: https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault и https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation

В любом случае вам не нужно два вызова event.preventDefault(), если вы поместите один в верхней части ваш слушатель событий, например

form.addEventListener('submit', function(event) {
    event.preventDefault();
    ...