Пустая строка передана getElementById () - Bootstrap 4 и AJAX

Question

Я пытаюсь отправить форму, используя AJAX. Но каждый раз, когда я отправляю сообщение, я вижу Empty string passed to getElementById(). в консоли. Я не человек JavaScript, но это сообщение мало полезно даже для устранения проблемы. Может ли кто-нибудь помочь мне понять это?

Источник ошибки от util.js. Строка, соответствующая ошибке:

  try {
    return document[method](selector) ? validSelector : null
  } catch (err) {
    return null
  }

ID #contact-form уникален. На самом деле, я единственная страница сайта, и она настолько уникальна, насколько тембр моего голоса, что я могу сказать. Я не понимаю, почему это недопустимый селектор.

Моя версия JQuery: 3.2.1

Версия Bootstrap: 4

Ниже приведены мои коды.

---

Форма HTML:

                <form id= "contact-form" action="" method="post" enctype="multipart/form-data">
            <div class="form-group mt-5">
              <div class="input-group input-group-alternative">
                <div class="input-group-prepend">
                  <span class="input-group-text"><i class="ni ni-user-run"></i></span>
                </div>
                <input class="form-control" name="name" id="name" placeholder="Your name" type="text" required>
              </div>
              <div class="help-block with-errors"></div>
            </div>
            <div class="form-group">
              <div class="input-group input-group-alternative">
                <div class="input-group-prepend">
                  <span class="input-group-text"><i class="ni ni-email-83"></i></span>
                </div>
                <input class="form-control" name="email" placeholder="Your email" type="email" required>
              </div>
              <div class="help-block with-errors"></div>
            </div>
            <div class="form-group">
              <div class="input-group input-group-alternative">
                <div class="input-group-prepend">
                  <span class="input-group-text"><i class="ni ni-chat-round"></i></span>
                </div>
                <input class="form-control" name="phone" placeholder="Your number" type="tel" required>
              </div>
              <div class="help-block with-errors"></div>
            </div>
            <div class="form-group">
                <div class="input-group input-group-alternative"">
                  <div class="custom-file">
                    <input type="file" class="custom-file-input" id="file-attachment">
                    <label class="custom-file-label" for="file-attachment">Choose file</label>
                  </div>
                </div>
            </div>
            <div class="form-group mb-4">
              <textarea class="form-control form-control-alternative" name="message" rows="4" cols="80" placeholder="Your message..." required></textarea>
            </div>
            <div>
              <input type="submit" name = "send" class="btn btn-default btn-round btn-block btn-lg" value="Send">
            <div id="mail-spinner" class="spinner-border m-5" role="status" style="display: none;">
              <span class="sr-only">Loading...</span>
            </div>
              <div id = "mail-status" class="messages"></div>
            </div>
          </form>

AJAX JS:

"use strict";
$(document).ready(function() {

// File Upload

$('input[type="file"]').change(function(e){
    var fileName = e.target.files[0].name;
    $('.custom-file-label').html(fileName);
});

// Form AJAX

$("#contact-form").on('submit', (function(e) {
    e.preventDefault();
    $('#mail-spinner').show();
    $.ajax({
        url: "handlers/send-mail.php",
        type: "POST",
        data: $(this).serialize(),
        contentType: false,
        cache: false,
        processData: false,
        success: function(data){
            $("#mail-status").html(data);
            $('#mail-spinner').hide();
        },
    });
}));
});