如果元素被隐藏,则忽略.NET验证器(display:none)

Question

我们经常遇到使用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,只有当它们可见时才能验证控件.

Answer 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上无效.我稍微更改了上面的示例代码.

如果有人看到任何错误或可能的改进,请评论:)