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

如果有人看到任何错误或可能的改进，请评论：）

Answer 2

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

Answer 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);
}

要将Custom DisableValidators方法添加到单击事件树中：

$（'＃myButtonControlId'）。on（“ click”，function（e）{DisableHiddenValidators（'Send'）;}）;

如果元素被隐藏，则忽略.NET验证器（display：none）

3 个答案: