JQuery не показывает "Пожалуйста, заполните это поле"

Question

У меня есть форма с несколькими обязательными полями.Кнопка отправки имеет идентификатор add.

Я хочу сделать так, чтобы, если форма действительна, она запустила функцию с именем stopNavigate()

Так что в моем коде у меня есть:

$("#add").on('click', function(){
    if($('form').first().valid()){
        stopNavigate();
    }
});

Однако, когда я это делаю, я больше не получаю подсказку «Пожалуйста, заполните это поле» в поле ввода.Есть ли еще способ заставить его проверить это?

Вот пример jsFiddle .

Требуемый вывод для недопустимогоinput

Однако, когда я нажимаю Submit, jQuery Validator пытается вступить во владение с его сообщением об ошибке.Можно ли по-прежнему отображать всплывающую подсказку для проверки правильности HTML5?

Answer 1

Вы принимаете кнопку отправки click, которая не позволяет браузеру правильно обрабатывать «обязательные» (и другие) атрибуты для полей формы. Чтобы разрешить браузеру сделать это, вам нужно перехватить форму submit событие:

$('form').on('submit', function() {
   if($('form').first().valid()){
        stopNavigate();
    }
});

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