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[i].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[i].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

"NancyASAP" <na***************@boeing.com> wrote in message
news:11*********************@z14g2000cwz.googlegro ups.com...

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[i].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[i].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