Ignore .NET validators if element is hidden (display: none)

Question

We often come into problems with .NET validators on elements that are hidden using javascript/css (ie. 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

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.

Have you tried disabling the hidden elements? I'd expect that to be the solution. — Matt Ball
– Matt Ball, Commented Mar 7, 2012 at 4:39
What about the possibility of using two different view models when posting to the server: one for each of the different situations? You would just need to post to two different routes. — Eli
– Eli, Commented Mar 7, 2012 at 4:40
Alternatively you would need to do your validation in the javascript, rather than on the server. — arcynum
– arcynum, Commented Mar 7, 2012 at 4:40
@ MAT GAL Disabling them using JS? I'd rather write my own validations then? @Eli Not sure what you mean sorry. I've made the example clearer. @ arcynum That's what I want to avoid — Aximili
– Aximili, Commented Mar 7, 2012 at 4:55

Aximili · Accepted Answer · 2012-09-10 07:42:10Z

10

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

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

//===================================================================
// 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:

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

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

edited Sep 10, 2012 at 7:42

answered Mar 7, 2012 at 5:44

Aximili

29.6k58 gold badges163 silver badges228 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

DreamTeK Over a year ago

Unless I am doing somthing wrong. This disables all validators on the page. Even visible ones?

Aximili Over a year ago

It shouldn't. Is the visible variable set correctly for you?

FlemGrem Over a year ago

Magic: Thankyou! @aximili : a small modification added below to facilitate the ValidationGroup it resides in..

nealsu · Accepted Answer · 2014-08-15 13:12:32Z

0

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

answered Aug 15, 2014 at 13:12

nealsu

4386 silver badges19 bronze badges

Comments

FlemGrem · Accepted Answer · 2020-12-18 14:10:01Z

0

Magic: Thankyou!

Modified slightly to include the ValidationGroup it resides in..

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

To add Custom DisableValidators method to the click event tree:

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

edited Dec 18, 2020 at 14:10

answered Dec 18, 2020 at 14:01

FlemGrem

8144 silver badges9 bronze badges

Collectives™ on Stack Overflow

Ignore .NET validators if element is hidden (display: none)

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related