Как привязать к событию отправки при использовании проверки HTML5? - PullRequest
Новая
       0

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

10 голосов
/ 28 сентября 2011

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

В браузерах HTML5 проверка происходит до события submit.Поэтому, если форма недействительна, событие 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!')
    });
});

Интерактивныйdemo: http://jsfiddle.net/gCBbR/

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

Ответы [ 3 ]

16 голосов
/ 28 сентября 2011

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

Из W3C:

Когда вызывается метод checkValidity(), если элемент кандидат на подтверждение ограничения и не удовлетворяет его ограничения, пользовательский агент должен запустить простое событие с именем invalid это можно отменить (но в этом случае не имеет действия по умолчанию) на элемент и вернуть ложь. В противном случае он должен возвращать только 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

0 голосов
/ 30 октября 2012

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

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

        $.post("url",$("form").serialize(),function(data){
                             $("#result").html(data).show();
                              });
       });
0 голосов
/ 28 сентября 2011 
$(function() {
    $('form').one('submit',function() {
        alert(1);

        [...]

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...