如果元素被隐藏，则忽略 .NET 验证器（显示：无）答案

【问题标题】：Ignore .NET validators if element is hidden (display: none)如果元素被隐藏，则忽略 .NET 验证器（显示：无）
【发布时间】：2012-03-24 15:38:59
【问题描述】：

我们经常在使用 javascript/css 隐藏的元素上遇到 .NET 验证器问题（即 display:none）

例如（可能有语法错误但不用担心）

<asp:CheckBox ID="chkNewsletter" runat="server" Checked="true" />
...
<div id='newsletterOnly'>
  <asp:TextBox ID="txtEmail" runat="server" />
  <asp:RequiredFieldValidator ID="vldEmail" ControlToValidate="txtEmail" ErrorMessage="Required" runat="server" />
</div>

使用 JavaScript：

$('#chkNewsletter').changed(function() {
  $(this).is(':checked') ? $('#newsletterOnly').show() : $('#newsletterOnly').hide();
});

它不应该验证 txtEmail 如果它是隐藏的。
如果 newsletterOnly 被隐藏，则无法提交表单，因为RequiredFieldValidator 即使隐藏了仍然有效:(
而且您甚至看不到验证器错误消息，因为它是隐藏的

有没有办法解决这个问题？

我试图避免 PostBacks 以改善用户体验。
我希望我可以修改 .NET javascript 以仅在控件可见时验证它们。

【问题讨论】：

您是否尝试过禁用隐藏元素？我期望这是解决方案。
发布到服务器时使用两种不同的视图模型的可能性如何：一种用于不同的情况？您只需要发布到两条不同的路线。
或者您需要在 javascript 中进行验证，而不是在服务器上。
@MAT GAL 使用 JS 禁用它们？那我宁愿自己写验证吗？ @Eli 不知道你是什么意思对不起。我已经使示例更清楚了。 @arcynum 这就是我想要避免的

标签： javascript jquery asp.net validation

【解决方案1】：

我把它写成一个通用解决方案（可以在所有 .NET 网站上使用）。

您只需要在提交按钮上添加一个 OnClientClick 即可。

//===================================================================
// Disable .NET validators for hidden elements. Returns whether Page is now valid.
// Usage:
//   <asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClientClick="DisableHiddenValidators()" />
//===================================================================
function DisableHiddenValidators() {
  for (var i = 0; i < Page_Validators.length; i++) {
    var visible = $('#' + Page_Validators[i].controltovalidate).is(':visible');
    ValidatorEnable(Page_Validators[i], visible)
  }
  return Page_ClientValidate();
}

要使用它，只需包含上面的javascript并将OnClientClick="DisableHiddenValidators()"类添加到提交按钮：

<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClientClick="DisableHiddenValidators()" />

编辑： jQuery $(submitButton).click 函数在 iPhone/Android 上不起作用。上面的示例代码我稍微改了一下。

如果有人发现任何错误或可能的改进，请发表评论:)

【讨论】：

除非我做错了什么。这会禁用页面上的所有验证器。甚至是可见的？
不应该。是否为您正确设置了可见变量？
魔术师：谢谢！ @aximili ：下面添加了一个小修改，以方便它所在的 ValidationGroup ..

【解决方案2】：

在这种情况下使用验证组也是一个好主意。如果您可以对验证器进行分组，然后在 Button 上指定您需要针对哪个验证组进行验证，则只会验证该组中的那些验证器。在这里阅读更多： http://msdn.microsoft.com/en-us/library/vstudio/ms227424(v=vs.100).aspx

【讨论】：

【解决方案3】：

魔法：谢谢！

稍作修改以包含它所在的 ValidationGroup..

function DisableHiddenValidators(validationGroup) {
    for (var i = 0; i < Page_Validators.length; i++) {
        var isVisible = $('#' + Page_Validators[i].controltovalidate).is(':visible');  
        var isValGrp = (Page_Validators[i].validationGroup === validationGroup);
        ValidatorEnable(Page_Validators[i], (isValGrp && isVisible));  //Turn on only if in Validation group and IsVisible = true
    }
    return Page_ClientValidate(validationGroup);
}

将自定义 DisableValidators 方法添加到点击事件树：

$('#myButtonControlId').on("click", function(e) { DisableHiddenValidators('Send'); });

【讨论】：