Запретить пользователю отправлять форму входа до загрузки Javascript - PullRequest
Новая
       3

Запретить пользователю отправлять форму входа до загрузки Javascript

0 голосов
/ 31 марта 2020

У нас есть форма входа в React App. Мы используем рендеринг на стороне сервера. Некоторые пользователи могут отправить форму до загрузки JavaScript. Результатом является неудачная попытка входа в систему для пользователя и сообщение журнала GET-запроса формы по умолчанию, которое содержит учетные данные пользователя для входа. И то и другое плохо.

Это наша сгенерированная форма: 

<form>
    <input aria-invalid="false" autocomplete="user" id="user" name="user" type="text" aria-label="Benutzername"
        value="">
    <input aria-invalid="false" autocomplete="current-password" id="password" name="password" type="password"
        aria-label="Passwort" value="">
    <button tabindex="0" type="submit" data-e2e="einloggen-button" aria-disabled="false">Einloggen</button>
</form>

Я подумал, что это может быть распространенной проблемой при рендеринге на стороне сервера. Есть ли решение, при котором пользователь не может отправить форму, и у нас все еще может быть действительный HTML?

Ответы [ 2 ]

0 голосов
/ 31 марта 2020

Вы можете использовать указатель-события: нет во время загрузки DOM и отключить его, когда страница полностью загружена: 

document.onreadystatechange = function() {
  const body = document.querySelector("body");
  if (document.readyState === "loading") {
    console.log("Page is loading"); // Not running
  } else if (document.readyState === "interactive") {
    console.log("DOM is Loaded");
    body.style = 'pointer-events: none;' // Button disabled on click
  } else {
    console.log("Page is loaded");
    // body.style = 'pointer-events: auto;'
  }
};

Здесь вы можете найти живой пример на Repl.it

Вы также можете просто добавить обязательное поле в HTML, что позволит вашим пользователям не заполнять пустую форму.

0 голосов
/ 31 марта 2020

Если вы хотите отключить отправку перед загрузкой документа, вы можете использовать этот код в теге head. 

 <script>
    document.forms[0].querySelector('button').disabled = true;
    document.onload = () => {
         document.forms[0].querySelector('button').disabled = false;
    }
 </script>
...