如何在表单提交时，若无错误发生，禁用提交按钮

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

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

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

谢谢

- Gaurav Sharma

Answer 1

在jQuery Validate中添加以下参数：

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

- SLaks

---

谢谢，那个完美无缺地运行了。你能解释一下第二行代码吗？ 它等同于$("form").find("input[type=submit]").attr("disabled","disabled");吗？ 哪一个更快？ - Gaurav Sharma

我的可能会快一点。我使用 the :submit selector，以及接受一个元素作为搜索对象的 $ 函数变体。 - SLaks

感谢@SLaks。现在我也从您的答案中了解了一些jQuery知识。我给你点赞（+1）。 - Kangkan

注意：在谷歌浏览器（8.0.552.224）中，如果使用上述技术禁用提交按钮，则无法接收提交按钮的发布值。有什么想法可以解决这个问题吗？谢谢。 - Gaurav Sharma

Answer 2

我还没有使用过jQuery验证插件，但在这里阅读了文档。

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

你可以：

1）在submitHandler回调函数中禁用按钮

2）保留现有的禁用代码，然后在invalidHandler回调函数中重新启用按钮

- house9

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

        });
})

- Kangkan

---

你在一个Json对象声明中插入了一条语句，这将会破坏验证方法，请小心 :) - mamoo

谢谢您抽出时间尝试解决我的问题，但那永远不会起作用。 :-) - Gaurav Sharma

感谢@SLaks，@mamoo和@Gaurav。我现在学会了一种在jQuery中不做某事的方法。我计划学习它。只需要开始。我已经将这个问题放在我的收藏夹中。对于这个问题，我肯定会点赞。 - Kangkan