HTML5 проверить форму с обязательным = "true" и пользовательской проверкой

Question

То, что я ищу: способ проверки врожденной HTML 5 формы с использованием required = "true", где, если пользователь нажимает кнопку "Отправить", первое, что происходит, это автоматическая проверка HTML 5, где она проверяет, предоставлено ли пользователем имя пользователя. Если это не так, то отображается сообщение об ужасной ошибке.

Однако, если он указан, у меня есть своя собственная проверка для проверки по БД, если имя пользователя существует. Если это так, верните true (разрешить отправку), иначе false. Что происходит: форма отправляется. Это похоже на то, что он не ждет, пока обратный вызов успеха вернет истину / ложь о том, должен ли он быть отправлен.

Надеюсь, это достаточно ясно! Код ниже:

HTML:

<form>
<input type="text" required="true" id="username" />
<button type="submit">Submit</button>
</form>

ЯШ:

$("form").submit(function() {
  $.ajax({
      url: 'usernamechecker.php?username=' + $("#username").val(),
      success: function(resp) {
        if (!resp.UsernameExists) {
          return true; // allow form submission
        }
        return false; // do not allow form submission
      }
    });
});

Answer 1

Вы не можете вернуть значение от до подобного обратного вызова. Обратный вызов для «success» не будет запущен до тех пор, пока не завершится вызов «ajax», long после того, как обработчик «submit» уже вернулся.

Вместо этого я просто сделал бы отправку и позволил бы ей возвращаться с ошибкой, если есть проблемы на стороне сервера (такие как "имя пользователя в использовании" или что-то еще). Нет смысла совершать две поездки в оба конца. Если проблем нет, он может просто завершить операцию и вернуть любую страницу результатов, которую вы хотите.

Answer 2

Вам нужно добавить «async: false» в качестве параметра к вашему вызову ajax, чтобы принудительно завершить вызов, прежде чем продолжить с остальным кодом.

$("form").submit(function(event) {
  $.ajax({
      async: false,
      url: 'usernamechecker.php?username=' + $("#username").val(),
      timeout: 1000,
      success: function(resp) {
        if (resp.UsernameExists) {
          event.preventDefault(); // do not allow form submission
        },
      error: function() {
          //fall back code when there's an error or timeout
      },
    });
});