Resetting Validation Controls via Reset Button

[NancyASAP]

Thought I'd share this since it took me a long time to get it working.
Thanks to a bunch of contributers in Google Groups who shared
javascript, etc.

The question was: How can I put a reset button on my ASP.NET web page,
and have an HTML reset button click clear 1) all validator text display
and 2) validation summary display. Problem was clearing them and yet
still leaving them working and visible if the user immediately began
re-entering data after RESET.

I did it like this:
1) Put HTML Reset button on form.
2) Call a javascript function on Reset button's client-side onclick
event.
3) In the javascript function, reset the appropriate controls.

Note that this works great in Internet Explorer 6.0. However, there are
issues in Mozilla (I tested version 1.7.3). Validation text and summary
still clear, but because of the way that ASP.NET does postback on
submit, Mozilla can't find the original values. Even a plain RESET
button doesn't work right after postback using Mozilla (I tried).
Didn't test Netscape or Firefox.

Reset button:
<INPUT id="btnReset"
onclick="ResetValidators('ValidationSummary1','val');" type="reset"
value="Clear Form">

Javascript function:
//****************************************************
// ResetValidators(validationSummaryId, validationControlsPrefix)
// Purpose: Resets ASP.NET validation control text display
// AND validation summary control display to empty.
// Inputs: validationSummaryID - string - id of ValidationSummary
// control
// validationControlsPrefix - string - a prefix to use
// to identify validation controls when looping through all
// span Ids. (Validation controls are represented by spans).
// Outputs: none
//****************************************************

function ResetValidators(validationSummaryId, validationControlsPrefix)
{
var spans;
var divValSummary;

if (document.all) {
spans = document.all.tags('span');
divValSummary = document.all(validationSummaryId);
}
else if (document.getElementsByTagName) {
spans = document.getElementsByTagName('span');
divValSummary = document.getElementsById(validationSummaryId);
}
if (spans) {
for (var i = 0; i < spans.length; i++) {
var prefixLength = "" + validationControlsPrefix.length;
var currID = "" + spans.id
if ((currID != '') && (prefixLength != '')) {
if (currID.substring(0,prefixLength) == validationControlsPrefix) {
//note - set visibility to hidden, not display=none.
// otherwise validator text will never show up again after reset.
spans.style.visibility='hidden';
}
}
}
}
if (divValSummary) {
// note set display=none, NOT visibility=hidden. Exact opposite of
// spans above!! Otherwise, validation summary is hidden permanently.
divValSummary.style.display='none';
}

}

Hope this code is helpful.
Nancy Steinmann
MCSD .NET

 

[William F. Robertson, Jr.]

My "reset" button, just re-requests the page. Would this work for you?

<input type="button" onclick="javascript: location.href = location.href;"
value="reset" />

I found it easier to do this, rather than try to clear textboxes, reset drop
down, validators, etc.

HTH,

bill

Thought I'd share this since it took me a long time to get it working.
Thanks to a bunch of contributers in Google Groups who shared
javascript, etc.

The question was: How can I put a reset button on my ASP.NET web page,
and have an HTML reset button click clear 1) all validator text display
and 2) validation summary display. Problem was clearing them and yet
still leaving them working and visible if the user immediately began
re-entering data after RESET.

I did it like this:
1) Put HTML Reset button on form.
2) Call a javascript function on Reset button's client-side onclick
event.
3) In the javascript function, reset the appropriate controls.

Note that this works great in Internet Explorer 6.0. However, there are
issues in Mozilla (I tested version 1.7.3). Validation text and summary
still clear, but because of the way that ASP.NET does postback on
submit, Mozilla can't find the original values. Even a plain RESET
button doesn't work right after postback using Mozilla (I tried).
Didn't test Netscape or Firefox.

Reset button:
<INPUT id="btnReset"
onclick="ResetValidators('ValidationSummary1','val');" type="reset"
value="Clear Form">

Javascript function:
//****************************************************
// ResetValidators(validationSummaryId, validationControlsPrefix)
// Purpose: Resets ASP.NET validation control text display
// AND validation summary control display to empty.
// Inputs: validationSummaryID - string - id of ValidationSummary
// control
// validationControlsPrefix - string - a prefix to use
// to identify validation controls when looping through all
// span Ids. (Validation controls are represented by spans).
// Outputs: none
//****************************************************

function ResetValidators(validationSummaryId, validationControlsPrefix)
{
var spans;
var divValSummary;

if (document.all) {
spans = document.all.tags('span');
divValSummary = document.all(validationSummaryId);
}
else if (document.getElementsByTagName) {
spans = document.getElementsByTagName('span');
divValSummary = document.getElementsById(validationSummaryId);
}
if (spans) {
for (var i = 0; i < spans.length; i++) {
var prefixLength = "" + validationControlsPrefix.length;
var currID = "" + spans.id
if ((currID != '') && (prefixLength != '')) {
if (currID.substring(0,prefixLength) == validationControlsPrefix) {
//note - set visibility to hidden, not display=none.
// otherwise validator text will never show up again after reset.
spans.style.visibility='hidden';
}
}
}
}
if (divValSummary) {
// note set display=none, NOT visibility=hidden. Exact opposite of
// spans above!! Otherwise, validation summary is hidden permanently.
divValSummary.style.display='none';
}

}

Hope this code is helpful.
Nancy Steinmann
MCSD .NET

 

[parndt]

Solution

call the below script e.g.
someButton.OnClientClick="unvalidate('" + validationSummary.ValidationGroup + "');return false;"; on your codebehind to stop validators' display.

Note that if the validator is set to Display="Static" or Display="Dynamic" it produces either display="inline" or visibility="visible" on the style property in HTML so this has been checked on line 11/13 of the function.

Script to place in your webpage / external javascript file (probably dont need the script tags if its in an external file)

<script type="text/javascript">
<!--
function unvalidate(myValidationGroup)
{
// Remove the validator control(s) from display.
var myValidators = Page_Validators;
if ((typeof(myValidators) != "undefined") && (myValidators != null))
{
for (i=0;i<myValidators.length;i++)
{
var myValidator = myValidators;
if (myValidationGroup == null || IsValidationGroupMatch(myValidator, myValidationGroup))
{
if (myValidator.style.visibility.length > 0 && myValidator.style.display.length == 0)
{
myValidator.style.visibility = 'hidden';
}
else if (myValidator.style.display.length > 0 && myValidator.style.visibility.length == 0)
{
myValidator.style.display = 'none';
}
}
}
}

// Remove the validator summary(ies) from display.
var mySummaries = Page_ValidationSummaries;
if ((typeof(mySummaries) != "undefined") && (mySummaries != null))
{
for(i=0;i<mySummaries.length;i++)
{
var mySummary = mySummaries;
if (myValidationGroup == null || IsValidationGroupMatch(mySummary, myValidationGroup))
{
mySummary.style.display = 'none';
}
}
}
}
//-->
</script>

NOTE: This relies on the .NET validator client side functions to do anything.. which *should* be present if you have cilent side validation on. No guarantees on functionality but would love to hear feedback on improvements/bugs.

You can call this with just unvalidate(); if you want it to hunt down controls and summaries across _all_ validation groups.

Hope this helps someone, it was driving me mad for a while.
Tested in Firefox 2.0.0.7 & should work in other browsers but let me know if not..

Cheers,
Phil