Bootstrap 4验证不会停止发送无效表单

Question

我具有使用Ajax表单的模块，可以在用户的​​电子邮件之后将用户添加到组（如果该电子邮件存在于db中；后端正在处理数据，前端正在接收响应。

但是我的bootstrap 4表单验证是有问题的：无论表单是否正确，它都不会停止ajax发送，但是仍然弹出验证提示。

HTML表单

<form id="form-add-users" class="form-validate">
    <div class="input-group">
         <div class="input-group-prepend">
              <span class="input-group-text">Email</span>
         </div>
         <input type="email" class="form-control" name="user-email" aria-label="email User" required>
         <div class="input-group-append">
              <button id="btn-add-users" type="submit" class="btn btn-primary">Add</button>
         </div>
     </div>

     <div class="text-center" id="user-verification-tooltip"></div>
     <input type="text" value="addUser" name="post-action" style="display: none;">
     <input type="text" value="<?= $this->id; ?>" name="group-id" style="display: none;">
</form>

SCRIPT

 $("#btn-add-users").click(function(e) {
        //e.preventDefault() //Totally stops bootstrap form validation
        var form = $("#form-add-users");
        var data = form.serialize();
        $.ajax({
            type: "POST",
            data: {
                'option': 'com_ajax',
                'module': 'my_module',
                'data': data,
                'format': 'raw'
            },
            success: function(data) {
                var response = JSON.parse(data);
                console.log(response);
                if (response[0] == 0) {
                    console.log('ok');
                    //$('#tableUsers tr:last').after(response[2]);
                    //setForm(userVerif, userInput, userTable, true, response[1])
                } else {
                    //setForm(userVerif, userInput, userTable, false, response[1])

                }
            }
        });

    });

示例：

• 电子邮件值=“” =>必需的工具提示字段=> Ajax仍发送电子邮件
• 值=“ aaa” =>工具提示无效的电子邮件格式=>仍发送Ajax
• 电子邮件值=“ [email protected]” =>没有工具提示=>仍发送Ajax

欢迎您尝试失败的提示：）

欢呼声

Answer 1

假设您已正确配置验证，则问题是因为您绑定到click的button而不是submit的form。试试这个：

$("#form-add-users").on('submit', function(e) {
  e.preventDefault();

  let data = $(this).serialize();
  // your ajax request...
});