仅在有效时禁用提交答案

【问题标题】：disable submit only if valid仅在有效时禁用提交
【发布时间】：2011-02-28 21:12:59
【问题描述】：

我使用 jquery 和 asp.net mvc。我正在做这样的事情，以便提交按钮在单击时被禁用。

但如果有验证错误，我不希望它被禁用。

 $('form').submit(function () {
        if ($('form').valid()) {
            $('input[type=submit]', this).attr('disabled', 'disabled');
        }
    });

这使它被禁用，但即使存在验证错误。怎么了？

【问题讨论】：

标签： jquery asp.net-mvc jquery-validate

【解决方案1】：

编辑：我第一次搞砸后我会再试一次：P

$('form').submit(function () {
        if ($('form').valid()) {
            $('input[type=submit]', this).attr('disabled', 'disabled');
        }
    });

也许页面上还有其他表单，它正在验证错误的表单？

$('form').submit(function () {
        if ($(this).valid()) {
            $(this).find('input[type=submit]').attr('disabled', 'disabled');
        }
    });

哦，您是否使用 $('form').validate() 来启用验证（如果您使用 MVC 的验证，我猜它会由 MVC 自动调用，但我对此不是 100% 确定）？

【讨论】：

我认为他想在表单发布时禁用提交按钮，这样用户就不会再次单击该按钮并重复发布。但是当表单无效时，不会发布任何内容，并且按钮应该保持启用状态。
可能他想让用户在表单无效而不是有效时重新提交。
啊，我明白我没有正确理解这个问题：P 我错过了提交按钮，并认为他的意思是禁用提交:)
发现这是一个完美的解决方案，只是希望不要花很长时间才能到达这里，而不是浪费时间尝试仅部分可行的解决方案。

【解决方案2】：

$('form').valid() 在控制台中运行时返回错误。你确定这是一个有效的功能吗？ AFAIK 它不是。

在 CSS 中，:valid 伪类应用于特定的输入，而不是表单元素。我只能假设它在 JavaScript 中是一样的。

话虽如此，HTML 验证目前的浏览器支持参差不齐，您不应盲目依赖它。如果您的表单像几个“必填”字段一样简单，您可以遍历每个输入元素并检查 this.getAttribute('required') && this.value != '' 是否。

【讨论】：

它是 JQuery 验证插件的一部分

【解决方案3】：

另一个技巧（不是特别相关，但我遇到了类似的问题）是，如果您有任何服务器端验证，或者服务器上真正发生的任何事情。

在后面的代码中，您的函数应该做的第一件事是重新启用该按钮。因为我有一个奇怪的错误（仍然无法弄清楚他们是如何做到的）但基本上：客户端验证很好（如果他们禁用了 JS），并且在服务器中我发现了一个错误，我在在 dom 中以不显眼的方式在回传。因此，他们可以尝试纠正到底出了什么问题。但显然这个按钮被禁用了......所以我收到了数百万的投诉。因此，故事的寓意是，重新启用按钮，这样如果它回发到同一页面，您的按钮仍然可以工作。耶。

【讨论】：

【解决方案4】：

您是否使用另一个 jquery 插件在表单上使用“valid()”函数？因为$('form').valid() 在带有核心 jquery 库的 Javascript 中没有任何意义

【讨论】：