Как заставить сафари отображать требуемую ошибку формы в прокручиваемой форме - PullRequest
Новая
       9

Как заставить сафари отображать требуемую ошибку формы в прокручиваемой форме

0 голосов
/ 05 марта 2019

Есть ли у кого-нибудь обходное решение для этой проблемы:

Проблема:

  • В Safari, если у вас есть прокручиваемая форма, обязательные поля вверху не будут отображать роднойerrorText, когда происходит событие отправки.

Пример

  • Пример Codepen
  • Работа Chrome / Firefox без проблем
  • Safari покажет ошибку в не прокручиваемой форме и потерпит неудачу в прокручиваемой форме.

У кого-нибудь есть решение для сафари.Мне нужно, чтобы эта функция работала для сафари. 

div {
  display: flex;
  flex-direction: row;
}
form {
  width: 200px;
}
input {
  height: 500px;
  width: 200px;
  background-color: green;
}

.small {
  height: 50px;
  background-color: salmon;
}
<div>
<form>
  <input type="text" required></input>
  <input type="submit"></input>
</form>

<form>
  <input type="text" required class="small"></input>
  <input type="submit" class="small"></input>
</form>
</div>

ПРИМЕЧАНИЕ: убедитесь, что ваше окно прокручивается для формы слева, иначе эта ошибка не появится.

Обновление:

Можно решить эту проблему, выполнив HTMLElement.scrollIntoView() с помощью метода oninvalid для формы.

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

...