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

We often come into problems with .NET validators on elements that are hidden using javascript/css (ie. display:none)

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

For example (there may be syntax errors but don't worry about it)

例如(可能存在语法错误但不担心)

<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>

with JavaScript:

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

It should not validate txtEmail if it is hidden.
You can't submit the form if newsletterOnly is hidden, because the RequiredFieldValidator is still effective eventhough it is hidden :(
And you can't even see the validator error message because it is hidden

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

Is there any way around this?

有没有办法解决?

I am trying to avoid PostBacks to improve user experience.
I wish I could modify .NET javascript to validate controls only when they are visible.

我试图避免PostBacks改善用户体验。我希望我可以修改.NET javascript,只有当它们可见时才能验证控件。

2 个解决方案

#1

I wrote this as a general solution (can be used on all .NET websites).

我把它写成一般解决方案(可以在所有.NET网站上使用)。

You only need to add an OnClientClick to the submit button.

您只需要在提交按钮中添加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();
}

To use it, simply include the above javascript and add the class OnClientClick="DisableHiddenValidators()" to the submit button:

要使用它,只需包含上面的javascript并将类OnClientClick =“DisableHiddenValidators()”添加到提交按钮:

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

EDIT: jQuery $(submitButton).click function didn't work on iPhone/Android. I have changed the sample code above slightly.

编辑:jQuery $(submitButton).click功能在iPhone / Android上无效。我稍微更改了上面的示例代码。

If anyone see anything wrong or possible improvements please comment :)

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

#2

It can also be a good idea to use Validation Groups in a situation like this. If you can group your validators then specify on the Button which validation group you need to validate against, only those validators in the group will be validated. Read more here: http://msdn.microsoft.com/en-us/library/vstudio/ms227424(v=vs.100).aspx

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

#1