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

Question

我有一个带有 Ajax 表单的模块，可以根据他们的电子邮件将用户添加到组中（如果该电子邮件存在于数据库中）；后端正在工作并处理数据，前端正在接收响应。

但是我的 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>

脚本

 $("#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 仍发送电子邮件
value = "aaa" => 工具提示不是有效的电子邮件格式 => Ajax 仍然发送
电子邮件值 = "aaa@aaa.aaa" => 没有工具提示 => Ajax 仍然发送

欢迎任何关于失败原因的提示:)

干杯

Answer 1

假设您已正确配置验证，那么问题是因为您绑定了 button 的 click 而不是 [=14= 的 submit ].试试这个：

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

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

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

Bootstrap 4 validation not stopping invalid form to be sent

jquery

ajax

bootstrap-4

joomla