时间戳

首页 > 解决方案 > Bootstrap 4 验证不会停止发送无效表单

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

问题描述

我有带有 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>

脚本

 $("#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])

                }
            }
        });

    });

例子 ：

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

干杯

标签： jqueryajaxbootstrap-4joomla

解决方案

假设您已正确配置验证，那么问题是因为您已绑定到click的而button不是. 尝试这个：submitform

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

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

推荐阅读