Валидация форм в JS с обращением к серверу Fast API

Рейтинг: 2Ответов: 1Опубликовано: 02.08.2023

Я создаю форму регистрации/входа на HTML. Я через Java Script обращаюсь к серверу Fast API. Однако форма отправляется в любом случае. Можете подсказать , в чём моя ошибка? Форма на HTML:

<form action="/login_or_create" method="POST" onsubmit="return validateForm() && checkLogin()">
  <p id="error"> </p>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>

    <label for="text">Login:</label>
    <input type="text" id="login" name="login" required>


    
    <label for="password">Пароль:</label>
    <input type="password" id="password" name="password" required>


    
    <label for="action">Выберите действие:</label>
    <select id="action" name="action">
        <option value="register">Регистрация</option>
        <option value="login">Вход</option>
    </select>


    
    <input type="submit" value="Отправить">
</form>

Функция валидации формы на JavaScript

      async function checkLogin() {
      // Получение данных с сервера
      const response = await fetch("http://127.0.0.1:8000/logins");
      const logins = await response.json();

      const loginInput = document.getElementById("login");
      const login = loginInput.value;

      // Проверка наличия логина в списке
      if (logins.includes(login)) {
        return false;
      }
      return true;
    }
javascript html promise
Источник: Stack Overflow на русском

Ответы

▲ 2Принят

в чём моя ошибка?

Очевидно, в непонимании работы async-функций... Она всегда возвращает promise. И promise в условии не false - значит, условие считается истинным.

В твоем выражении:

return validateForm() && checkLogin()

return вернет форме "не false", а значит, форма будет отправлена.

//
async function test() {
    console.log(1)
    await 
    console.log(2)
    return false
}
// тут test() вернет промис и условие выполнится...
if (test()) console.log(3)
console.log(4)

Проверку на отправку нужно организовывать как-то так:

document.querySelector('form').addEventListener('submit', e => {
  // отмена действия по умолчанию (т.е. не отправляем форму)
  e.preventDefault()
  test()
    .then(ok => {
      if (ok) return e.target.submit()
      alert('Форма не прошла валидацию...')
    })
    .catch(err => console.log(err))
})
//
async function test() {
  return false
}
<form>
  <input />
  <button>Тест</button>
</form>