Проверка формы HTML5 вне поля зрения не вызывает всплывающее сообщение Mac Safari - PullRequest
Новая
       9

Проверка формы HTML5 вне поля зрения не вызывает всплывающее сообщение Mac Safari

0 голосов
/ 01 февраля 2019

У меня есть простая форма с длинным списком текстовых полей.Каждое из полей помечено как обязательное.Вот так:

В браузере, если я прокручиваю недопустимое пустое поле вне поля зрения, а затем отправляю форму.Форма будет прокручиваться до недопустимого поля, выделять границу поля, но всплывающее сообщение, которое должно содержать проверочный текст «Пожалуйста, заполните это поле», не отображается.

Если при отправке формы пустое поле находится в поле зрения, тогда Safari отображает всплывающее сообщение и текст, как и ожидалось.

Я использую браузер Safari (версия 12.0.2) на Mac.

Вот пример очень простой формы.

https://jsfiddle.net/7ho0udrw/

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title></title>
</head>
<body>
    <form action="">
        <input required="required"></br>
        <input required="required"></br>
        <input required="required"></br>
        <input required="required"></br>
        <input required="required"></br>
        <input required="required"></br>
        <input required="required"></br>
        <input required="required"></br>
        <input required="required"></br>
        <input required="required"></br>
        <input required="required"></br>
        <input required="required"></br>
        <input required="required"></br>
        <input required="required"></br>
        <input required="required"></br>
        <input required="required"></br>
        <input required="required"></br>
        <input required="required"></br>
        <input required="required"></br>
        <input required="required"></br>
        <input required="required"></br>
        <input required="required"></br>
        <input required="required"></br>
        <input required="required"></br>
        <input type="submit">
    </form>
</body></html>

1 Ответ

0 голосов
/ 05 февраля 2019

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

Вот возможный обходной путь: добавьте вторую кнопку отправки 

<form>
  <input required name="foo">
  <button class="submit">submit</button>
  <button class="safari"></button>
</form>

, чтобы скрыть ее с помощью css 

.safari { display: none; }

и использовать javascript, чтобы вызвать нажатие на скрытую кнопку.после того, как пользователь нажимает видимую кнопку. 

$('.button').click(function(){
  setTimeout(function(){
    $('.safari').click()
  }, 1);
});

скрипка

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...