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 все еще отправлено email
• value = "aaa" => Всплывающая подсказка недействительна в формате электронной почты => Ajax все еще отправлено
• email value = "aaa@aaa.aaa" => Нет всплывающей подсказки => Ajax все еще отправлено

Любые подсказки о том, почему это не удается, приветствуются :)

Ура

Answer 1

Предполагая, что вы правильно настроили проверку, проблема в том, что вы связались с click из button вместо submit из form. Попробуйте это:

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

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