Оповещение появляется несколько раз и кнопка отправки работает только после второго нажатия

Question

Я работаю над своим финальным проектом CS50. Я разрабатываю веб-приложение: я использую колбу. Это происходит на странице входа / регистрации. Я пытаюсь проверить, было ли имя пользователя уже занято (через jsonify), и совпадают ли пароль и подтверждение пароля с использованием JS.

Итак, в основном проблема заключается в следующем: после загрузки страницы и заполнения регистрационной формыничего не происходит при первом нажатии на кнопку отправки. На втором клике все работает так, как и предполагалось: функции работают нормально, проверяют совпадение паролей и, если имя пользователя доступно, и предупреждают при необходимости. Если я затем закрою окно оповещений и снова нажму кнопку «Отправить», я получу два оповещения от функции usercheck. Если сделать то же самое снова 3 оповещения, затем 4 и так далее ... По какой-то причине функция вызывается снова и снова, но я не могу понять, где ....

Вот HTML:

<form id='register' action='/register' method="POST"  onsubmit="return !!(passwordcheck() & usercheck());" ></form>

Вот две функции JS в теге скрипта на одной странице:

 function passwordcheck(){

       const password = document.getElementById('password').value;
       const passwordc = document.getElementById('passwordc').value;

       if (password != passwordc){
         alert('Passwords do not match')
         return false;
       }
     }

        function usercheck(){

  $('document').ready(function(){

    $('form').on('submit',function(e){

      e.preventDefault();
      var username = document.querySelector('#username').value;
      $.get('/check?username=' + username, function(r){
        if(r == false){
          alert('User taken');
          $('#username').focus();
        }
        else{
          (document).getElementById('register').submit();
        }
      } )
    })
  })
}

А вот код Python из файла application.py, который запрашивает у базы данных имя пользователя:

@app.route("/check", methods=["GET"])
def check():
    print(Fore.BLUE + "check function, line 99") 
    """Return true if username available, else false, in JSON format"""
    username = (request.args.get('username'),)
    if username:

        c.execute("SELECT username FROM users WHERE username =?", username)
        old_user = c.fetchall()

        if len(old_user) > 0:
            return jsonify(False)
        else:
            return jsonify(True)

Answer 1

Вы определили два обработчика для события отправки формы:
- первая в html (onsubmit="return !!(passwordcheck() & usercheck());") - это функция userCheck, которая фактически не делает запрос
- вторая внутри userCheck функция ($('form').on('submit',function(e){), которая делает запрос

Так что при первом вызове функции userCheck она не выполняет запрос, а добавляет обработчик события отправки в форму. Вот почему запрос делается только после повторной отправки формы.

Вам должно быть лучше что-то вроде этого:

function passwordcheck() {

    const password = document.getElementById('password').value;
    const passwordc = document.getElementById('passwordc').value;

    if (password != passwordc) {
        alert('Passwords do not match')
        return false;
    }
}

function usercheck(handleSuccess, handleError) {
    var username = document.querySelector('#username').value;
    $.get('/check?username=' + username, function(r) {
        if (r == false) {
            handleError();
        } else {
            handleSuccess();
        }
    })
}

function submit() {
    (document).getElementById('register').submit();
}

function handleUserError () {
    alert('User taken');
    $('#username').focus();
}

$('document').ready(function() {
    $('form').on('submit', function(e) {
        e.preventDefault();

        if (!passwordcheck()) {
            return;
        }

        usercheck(submit, handleUserError);
    })
})

и без атрибута onsubmit на вашемэлемент формы.