如果元素被隐藏,则忽略 .NET 验证器(显示:无)

Posted

技术标签:

【中文标题】如果元素被隐藏,则忽略 .NET 验证器(显示:无)【英文标题】:Ignore .NET validators if element is hidden (display: none) 【发布时间】: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 这就是我想要避免的 【参考方案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'); );

【讨论】:

以上是关于如果元素被隐藏,则忽略 .NET 验证器(显示:无)的主要内容,如果未能解决你的问题,请参考以下文章

JQuery显示隐藏

Gmail 忽略“显示:无”

jquery单击按钮显示或隐藏

JQuery中的DOM动画

JQuery显示隐藏(学习他人方法后)

用jquery怎么实现点击显示,再一次点击隐藏