最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - how do I disable the submit button when the form gets submitted without any errors - Stack Overflow

programmeradmin7浏览0评论

I want to disable the submit button when a user submits the form so that he may not click the submit button twice.

So I coded the following javascript in my page


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

This works great. But when I applied the jquery validate library and appended the following code


$(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.'
                }
            }
        });
})

The submit button got disabled after submitting form even if there are inplete inputs in the website (i.e. form with errors and user is asked to fill them properly).
and when the user pletes the form correcting all errors the submit button is disabled.

How do I first check if there are no errors in the form and then disable the submit button and then submit it finally.

Thanks

I want to disable the submit button when a user submits the form so that he may not click the submit button twice.

So I coded the following javascript in my page


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

This works great. But when I applied the jquery validate library and appended the following code


$(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.'
                }
            }
        });
})

The submit button got disabled after submitting form even if there are inplete inputs in the website (i.e. form with errors and user is asked to fill them properly).
and when the user pletes the form correcting all errors the submit button is disabled.

How do I first check if there are no errors in the form and then disable the submit button and then submit it finally.

Thanks

Share Improve this question asked May 7, 2010 at 16:31 Gaurav SharmaGaurav Sharma 2,8281 gold badge37 silver badges55 bronze badges
Add a ment  | 

3 Answers 3

Reset to default 7

Add the following parameter to jQuery Validate:

submitHandler: function(form) {
    $(':submit', form).attr('disabled', 'disabled');
    form.submit();
}

I have not used the jquery validator plugin but reading the docs here

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

you could

1) disable the button in the submitHandler callback

2) leave your existing disable code, but then re-enable the button in the invalidHandler callback

I have not started with jQuery yet. But I think, you can do something like this:

$(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');

        });
})
发布评论

评论列表(0)

  1. 暂无评论