Как инициировать событие «отправить» до того, как произойдет событие «размытие»?

Question

У меня есть форма, которая имеет сообщение об ошибке, как показано в примере ниже:

http://codepen.io/anon/pen/dYWyEM?editors=101

Шаги по воспроизведению проблемы заключается в следующем:

После открытия codepen ссылку,

1) Фокусировка в поле ввода

2) Нажмите кнопку отправки

3) Так как событие размытия запускается первым, сообщение об ошибке сначала скрывается, поэтому позиция кнопки отправки изменяется. Таким образом, событие click не зарегистрировано вообще, и мне нужен другой щелчок, чтобы отправить форму.

Есть ли способ отправить заявку первым?

Как-то мне нужно определить цель, которая вызывает событие размытия. Кажется, что relatedTarget позволяет нам выяснить элемент, вызвавший событие размытия. Однако это не работает в Firefox.

Есть ли способ вычислить связанный с ним тариф во всех браузерах?

Answer 1

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

Поэтому я предлагаю альтернативный подход вместо обходного пути/исправить вашу точную проблему, потому что, по-моему, нынешняя модель может быть проблематичной для начала.

Почему вы не выполняете все проверки полей в форме submit вместо размытия поля, а затем предотвращаете отправку, если в каком-либо из полей имеется ошибка проверки?

Answer 2

Основано на том, что было сказано в this answer Я пришел с этим solutio. Прослушайте событие mousedown, которое запускает до blur и проверяет, может ли пользователь отправить форму на основании сообщения об ошибке или нет.

form.on('mousedown','input[type="submit"]', function(e) { 
    if(!errorMsg.hasClass("hidden")){ 
    e.preventDefault(); 
    alert("Can't submit until the error message is gone"); 
    } 
}); 

Я обновил ваш CodePen.