Как запустить HTML5 валидацию формы перед AJAX?

Question

[Посторонним В.]

Есть форма входа, которая при подключенном JS вместо сабмита запускает AJAX запрос:

$(document).ready(function () {

    $('#login-form__submit').click(function (e) {
        e.preventDefault();
        tryToLogin(); // выполняет $.post(...
    });
})

Проблема - перед запуском AJAX не производится валидация формы. У меня всё прописано в HTML5 - required, minlength - и я не хочу еще лишний раз писать валидацию на JS.
Как запустить из JS HTML5 валидацию формы, и чтоб выскакивали нативные сообщения браузера в случае неправильно введенных данных?

Comments

[sim3x]

$('.formname').submit?

Старайтесь не использовать ид для такого рода вещей / вообще не использовать ид

[Посторонним В.]

sim3x, в CSS - понятно. Но разве в JS не лучше использовать ID? А то вдруг на странице появится элемент с таким же классом (просто потому что у него стиль такой же), и к нему тоже привяжется функция, что может быть нежелательно.

[sim3x]

Посторонним В.,
Вот потому, что он точно появится, лучше писать код так чтоб просто вставив хтмл жс код уже работал

Answer 1

[Посторонним В.]

Наконец-то нашёл более-менее простой способ.

Нужно прописать нечто такое перед инструкциями в tryToLogin():

if(!$('.login-form')[0].checkValidity()) {
        $('.login-form__submit').off( "click" ).click().click(function (e) {
            e.preventDefault();
            tryToLogin();
        });
        return false;
    }

Т.е. если браузер сообщает, что проверка не пройдена, мы анбиндим функцию с клика на сабмит, кликаем сабмит (браузер покажет нативные сообщения), и сразу же биндим функцию обратно.

Comments

[Сергей delphinpro]

Всё проще — нужно ловить не клик по сабмиту, а сабмит формы.

Плохо:
$('button.submit').on('click', function(e){...});
Хорошо:
$('form').on('submit', function(e){...});

[Посторонним В.]

Сергей, да, так логичнее. Но суть трюка та же останется.

[Сергей delphinpro]

Посторонним В., Вы не поняли. Никакого трюка не надо.
Сначала происходит HTML5 валидация, потом сабмит формы.
Если вы отслеживаете событие submit на форме, то у вас HTML5 валидация сначала отработает. Если валидация не прошла, сабмита не будет.

Если вы ловите клик на кнопке, то к отправке формы это отношения не имеет, потому что вы глушите это событие. а раз нет отправки, то нет и валидации. Кроме того клик не сработает при отправке формы клавишей Энтер.

[Посторонним В.]

Сергей, странно, так какого черта тогда тут сочиняют жуткие костыли?
https://stackoverflow.com/questions/7548612/trigge...