Question

我想在用户提交表单时禁用提交按钮，这样他就不会再点击提交按钮两次。

所以我在我的页面中编写了以下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.'
                }
            }
        });
})

提交表单后提交按钮被禁用，即使网站中有不完整的输入（即表单有错误，要求用户正确填写）。
当用户完成表格更正所有错误时，提交按钮被禁用。

如何首先检查表单中是否有错误，然后禁用提交按钮，然后最后提交。

由于

Answer 1

将以下参数添加到jQuery Validate：

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

Answer 2

我没有使用jquery验证器插件但是在这里阅读文档

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

你可以

1）禁用submitHandler回调中的按钮

2）保留现有的禁用代码，但随后重新启用invalidHandler回调中的按钮

Answer 3

我还没有开始使用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');

        });
})

如何在提交表单时没有任何错误地禁用提交按钮

3 个答案: