Блог

Главная - Вопросы по программированию - Firefox не отображает сообщение об ошибке форм после нескольких кликов

Firefox не отображает сообщение об ошибке форм после нескольких кликов

#javascript #html #forms #firefox #browser

Вопрос:

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

Поведение, которое я хочу, — это поведение Chrome, IE и Safari: если я нажму кнопку, и проверка подлинности завершится неудачно, то сообщение об ошибке будет отображаться независимо от того, сколько раз я нажимаю. Есть ли какой-либо способ заставить такое поведение в FF?

Ps: кнопка «Отправить» на самом деле имеет тип «кнопка», а не «отправить». Мне нужно, чтобы это была кнопка, но я попробовал также с помощью type=submit, и поведение не изменилось.

     function mySubmit(formId){
        let form = document.getElementById(formId);
        if(form.reportValidity()) {
            window.alert("submit");
            form.reset();
        }
    } 
 <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
  <title>Title</title>

</head>
<body>

<form id="myForm">
    <input type="text" required name="name" autocomplete="off">
    <button onclick="mySubmit('myForm')" type="button" class="submitButton" lang="en">Submit</button>

</form>

</body>
</html>

Ответ №1:

У вас довольно сложный код. Если вам нужно выполнить какой-то код JS при отправке формы, я предложу прослушиватель событий, подобный этому:

 document.forms.myForm.addEventListener('submit', e => {
  alert('submit');
  e.target.reset();
}); 
 <!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <form id="myForm">
    <input type="text" required name="name" autocomplete="off">
    <button class="submitButton" lang="en">Submit</button>
  </form>
</body>
</html>

Если вам нужно остановить действие отправки и/или прослушать недопустимое событие в элементе ввода (и отобразить свое собственное сообщение пользователю).

 document.forms.myForm.addEventListener('submit', e => {
  e.preventDefault();
  alert('submit');
  e.target.reset();
});

document.forms.myForm.name.addEventListener('invalid', e => {
  e.preventDefault();
  alert('invalid');
}); 
 <!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <form id="myForm">
    <input type="text" required name="name" autocomplete="off">
    <button class="submitButton" lang="en">Submit</button>
  </form>
</body>
</html>
Метки: