Javascript 引导形式不'；验证失败时，不能取消提交

我正在尝试创建一个表单，该表单将在提交时向用户发送电子邮件

问题是，我使用了Bootstrap的表单模板，当我提交时带有错误的phone和mail值（电话号码甚至为空），邮件仍然会发送（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>

---

如果你们能帮助我，我将不胜感激

此部分似乎是您唯一的验证检查：

            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（）

有助于阻止submit按钮执行其提交表单的默认行为，而

event.stopPropagation（）

只会防止事件冒泡到父元素（您可能不需要）。见：和

在任何情况下，如果在事件侦听器的顶部放置一个调用，则不需要两个

event.preventDefault（）

调用，例如

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

---

此部分似乎是您验证的唯一检查：

            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（）

有助于阻止submit按钮执行其提交表单的默认行为，而

event.stopPropagation（）

只会防止事件冒泡到父元素（您可能不需要）。见：和

在任何情况下，如果在事件侦听器的顶部放置一个调用，则不需要两个

event.preventDefault（）

调用，例如

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

---

谢谢你的回答，好吧，但是如果我使用if和else，提交就停止了，没有显示无效的反馈。hoo我只是忘了写.add（was validate）。非常感谢你！谢谢你的回答，好吧，但是如果我使用if和else，提交就停止了，没有显示无效的反馈。hoo我只是忘了写.add（was validate）。非常感谢你！