Как мне объединить эти два бита javascript?

Question

Я собираю веб-приложение Flask в качестве окончательного проекта для курса, и я изо всех сил пытаюсь исправить некоторые JavaScript для формы регистрации сайта.

У меня есть два независимых бита кода, один из Bootstrap для проверки полноты формы:

    <script>

    (function()
    {
      'use strict';
      window.addEventListener('load', function()
      {
        // Fetch all the forms we want to apply custom Bootstrap validation styles to
        var forms = document.getElementsByClassName('needs-validation');

        // Loop over them and prevent submission
        var validation = Array.prototype.filter.call(forms, function(form)
        {
          form.addEventListener('submit', function(event)
          {
            if (form.checkValidity() === false)
            {
              event.preventDefault();
              event.stopPropagation();
            }

            form.classList.add('was-validated');

          }, false);
        });
      }, false);
    })();

    </script>

и один, который я настроил, чтобы проверить, что пользователь регистрирует уникальное имя пользователя. Если имя пользователя не уникально, оно вставляет внутреннюю ошибку HTML в тег div "user_result" под полем формы имени пользователя:

<script>
        // set input value to form entry for username
        let input = document.getElementById('user');

        // on key up, run check
        input.onkeyup = function()
        {
            // query to check username against database
            $.get('/check?username=' + input.value, function(data)
            {
                // if check query returns False, username is NOT available
                if (!data)
                {
                    // put notification text into result tag above
                    document.getElementById('user_result').innerHTML = 'Username unavailable.';

                    // prevent form submission via register button
                    document.getElementById('register').addEventListener("click", function(event)
                    {
                        event.preventDefault();
                    });
                }
                // if check query returns True, username is available
                if (data)
                {
                    // no notification text required
                    document.getElementById('user_result').innerHTML = '';

                    // allow form submission by unbinding event handler
                    document.getElementById('register').addEventListener("click", function(event)
                    {
                        event.unbind();
                    });
                }
            });
        };
    </script>

По отдельности каждый из них работает нормально, но:

1. Кажется, я не могу поместить оба сценария в один и тот же HTML do c без непредвиденного поведения (например, форма не будет отправлена, но сообщения об ошибках не отображаются, или форма отправляет несмотря на неверное имя пользователя.)

2. Мне бы очень хотелось, чтобы "Имя пользователя недоступно". сообщение, отображаемое в том же стиле, что и класс «invalid-feedback», используемый для проверки формы Bootstrap.

Я бы даже хорошо проверил наличие имени пользователя после отправки ( см. попытку ниже), а не после keyup, но в идеале я бы проверял правильность имени пользователя перед отправкой формы.

Вот одна из моих попыток сшить части кода вместе. К сожалению, результатом здесь является то, что проверка Bootstrap работает, но проверка имени пользователя игнорируется (я могу отправить форму с неверным именем пользователя и вместо JS, блокирующей отправку формы, она проходит).

    <script>

    (function()
    {
      // set input value to form entry for username
      let input = document.getElementById('user');

      'use strict';
      window.addEventListener('load', function()
      {
        // Fetch all the forms we want to apply custom Bootstrap validation styles to
        var forms = document.getElementsByClassName('needs-validation');

        // Loop over them and prevent submission
        var validation = Array.prototype.filter.call(forms, function(form)
        {

          form.addEventListener('submit', function(event)
          {
            if (form.checkValidity() === true)
            {
            (function()
            {
            $.get('/check?username=' + input.value, function(data)
            {
                // if check query returns False, username is NOT available
                if (!data)
                {
                    // put notification text into result tag above
                    document.getElementById('user_result').innerHTML = 'Username unavailable.';

                    // prevent form submission via register button
                    document.getElementById('register').addEventListener("click", function(event)
                    {
                        event.preventDefault();
                        event.stopPropagation();
                    });
                }
                // if check query returns True, username is available
                if (data)
                {
                    // no notification text required
                    document.getElementById('user_result').innerHTML = '';

                    // allow form submission by unbinding event handler
                    document.getElementById('register').addEventListener("click", function(event)
                    {
                        event.unbind();
                        event.stopPropogation();
                    });
                }
            });
            });
            }

            if (form.checkValidity() === false)
            {
              event.preventDefault();
              event.stopPropagation();
            }

            form.classList.add('was-validated');

          }, false);
        });
      }, false);
    })();

    </script>

Может кто-нибудь помочь мне понять, где мое мышление не так? Пожалуйста, дайте мне знать, было бы полезно увидеть форму HTML или Flask для проверки имени пользователя.