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="[email protected]" 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();
    ...