Resetting Validation Controls via Reset Button

Discussion in 'ASP .Net' started by NancyASAP, Mar 11, 2005.

  1. NancyASAP

    NancyASAP Guest

    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
    NancyASAP, Mar 11, 2005
    #1
    1. Advertising

  2. 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" <> wrote in message
    news:...
    > 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., Mar 14, 2005
    #2
    1. Advertising

  3. NancyASAP

    parndt

    Joined:
    Oct 16, 2007
    Messages:
    1
    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
    parndt, Oct 16, 2007
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Chris Lane
    Replies:
    4
    Views:
    11,219
    Chris Lane
    Nov 17, 2003
  2. =?Utf-8?B?UFc=?=
    Replies:
    0
    Views:
    967
    =?Utf-8?B?UFc=?=
    Apr 24, 2006
  3. Replies:
    0
    Views:
    749
  4. Jay
    Replies:
    1
    Views:
    519
    bruce barker
    Feb 19, 2007
  5. Garry Jones
    Replies:
    14
    Views:
    2,370
    Dr J R Stockton
    Oct 18, 2011
Loading...

Share This Page