Как привязываться к событию отправки, когда используется проверка HTML5?

Использование проверки HTML5...

В браузерах HTML5 проверка выполняется перед событием submit. Поэтому, если форма недействительна, событие отправки никогда не срабатывает.

Я хотел бы связать событие с формой submit, чтобы запустить проверку формы или нет. Вот небольшой пример, где я пытаюсь alert(), когда пользователь отправляет форму.

HTML:

<!DOCTYPE html>
<html>
    <head><title>Example</title></head>
    <body>
        <form>
            <input type="text" name="foo" required title="Foo field"/>
            <input type="submit"/>
        </form>
    </body>
</html>

JavaScript:

$(function() {
    $('form').submit(function() {
        alert('submit!')
    });
});

Интерактивная демонстрация: http://jsfiddle.net/gCBbR/

Мой вопрос: сделать браузеры альтернативным событием, которое я могу связать с тем, что будет работать до проверки?

Ответ 1

Да, по этой причине есть событие. Событие называется invalid, когда пользователь пытается отправить запрос для orr, когда вы проверяете правильность с помощью метода проверки HTML5 checkValidity(). Это событие не срабатывает на blur или что-то подобное без вызова checkValidity() только потому, что у вас есть атрибуты проверки HTML в тэгах input. Но он срабатывает до отправки формы.

Из W3C:

При вызове метода checkValidity(), если элемент является кандидата на проверку ограничений и не удовлетворяет его ограничений, пользовательский агент должен запустить простое событие с именем invalidкоторый отменяется (но в этом случае не имеет действия по умолчанию) на элемент и возвращает false. В противном случае он должен возвращать true только без делать что-нибудь еще.

Например, у вас есть эта разметка:

<form>
            <input type="text" name="foo" required title="Foo field"/>
            <input type="submit"/>
</form>

Затем вам нужно вызвать checkValidity() для запуска события invalid, если данные input недействительны:

document.querySelectorAll('input')[0].addEventListener('blur', function(){
        this.checkValidity();
    }, false);

document.querySelectorAll('input')[0].addEventListener('invalid', function(){
        console.log('invalid fired');
    }, false);

Посмотрите на мой пример здесь: http://jsbin.com/eluwir/2

Ответ 2

$(function() {
    $('form').one('submit',function() {
        alert(1);

        [...]

        $(this).submit(); // optional
        return false; // returning false skips validator trigger
    });
});

этот код будет выполнен только один раз, для постоянного использования используйте $.bind

Ответ 3

если вы хотите использовать проверку по умолчанию для браузера, вы должны использовать следующее, так как вам необходимо привязать к отправке по умолчанию, затем предотвратить его и использовать $.ajax или $.post

$("form").bind('submit', function(e){
       e.preventDefault();

        $.post("url",$("form").serialize(),function(data){
                             $("#result").html(data).show();
                              });
       });