как отключить кнопку отправки, когда форма отправляется без каких-либо ошибок - PullRequest
8 голосов
/ 07 мая 2010

Я хочу отключить кнопку отправки, когда пользователь отправляет форму, чтобы он не мог дважды нажать кнопку отправки.

Итак, я кодировал следующий javascript на своей странице


$(document).ready(function(){
    $("form").submit(function(){
       $("form").find('input[type=submit]').attr('disabled', 'disabled');
    });
})

Это прекрасно работает. Но когда я применил библиотеку проверки jquery и добавил следующий код


$(document).ready(function(){
    $("form").submit(function(){
       $("form").find('input[type=submit]').attr('disabled', 'disabled');
    });

    $("form").validate({
            errorClass: "jqueryError",
            errorElement: 'label',
            success: 'jqueryValid',
            messages: {
                TopicCategory: {
                    required: 'Please choose a category for topic.'
                },
                TopicSubcategoryId: {
                    required: 'Please choose a subcategory for topic.'
                },
                TopicTitle: {
                    required: 'Please enter a title for topic.'
                }
            }
        });
})

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

Как сначала проверить, нет ли в форме ошибок, затем отключить кнопку отправки и затем отправить ее окончательно.

Спасибо

Ответы [ 3 ]

7 голосов
/ 07 мая 2010

Добавьте следующий параметр в jQuery Validate:

submitHandler: function(form) {
    $(':submit', form).attr('disabled', 'disabled');
    form.submit();
}
1 голос
/ 07 мая 2010

Я не использовал плагин валидатора jquery, но читая документы здесь

http://docs.jquery.com/Plugins/Validation/validate

вы можете

1) отключить кнопку в обратном вызове submitHandler

2) оставьте существующий код отключения, но затем повторно включите кнопку в обратном вызове invalidHandler

0 голосов
/ 07 мая 2010

Я еще не начал с jQuery. Но я думаю, вы можете сделать что-то вроде этого:

$(document).ready(function(){
    $("form").submit(function(){
    });

    $("form").validate({
            errorClass: "jqueryError",
            errorElement: 'label',
            success: 'jqueryValid',
            messages: {
                TopicCategory: {
                    required: 'Please choose a category for topic.'
                },
                TopicSubcategoryId: {
                    required: 'Please choose a subcategory for topic.'
                },
                TopicTitle: {
                    required: 'Please enter a title for topic.'
                }
            }
       $("form").find('input[type=submit]').attr('disabled', 'disabled');

        });
})
...