[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1078
  • Last Modified:

How do I 'sense' that the Validation Summary is visible via Javascript?

I want to display a div tag programmatically thru Javascript only if the client-side Validation Summary was triggered. Is there a way that I can sense that the validation summary was triggered?
0
bemara57
Asked:
bemara57
  • 4
1 Solution
 
Alpesh PatelCommented:
hi bemara57
when your  page load your validation summary control render as a <div> and having display attribute value  "none" as like under. the id would be different for your page.

<div id="ctl00_ContaintBody_ValidationSummary1" style="color:Red;display:none;">
</div>

now when your Validation Summary get triggered it make that display attirbute value '' and at that time <div> would be like this

<div id="ctl00_ContaintBody_ValidationSummary1" style="color:Red;display:'';">
</div>

so now we come to your point

you can create javascript function and get <div> element by its id and can check its display property... liek this

function IsValidationSummeryTrigger()
{

if (document.getElementById("ctl00_ContaintBody_ValidationSummary1").style.display =='none' )
{
// this is say that your validation summary is not triggered
}
else
{
// this is say that your validation summary is triggered
}


thanx
0
 
bemara57Author Commented:
Thanks I tried a few things with your suggestion and I just can't accomplish it with that. Here's what I'm trying to do. I have another div tag on the same page that I want to be visible if the validation summary is visible, and hidden if the validation summary is hidden. I tried this:

document.getElementById('ValidationSummaryExtras').style.display=document.getElementById('ctl00_UCPlaceHolder1_ctl00_ValidationSummaryClient').style.display;

This only made the 'ValidationSummaryExtras' tag the same as the summary when the page first loads. But when the validation summary is triggered, the Javascript isn't reprocessed to readjust ValidationSummaryExtras display. Maybe there's a way to embed this into the validationsummary's submit function where it actually does the checks? Not sure how to accomplish this. Any other ideas?
0
 
Bane83Commented:
The easiest solution:
You should put that code inside of a function and then what you do is add an onpropertychange event to the ValidationSummary:

<script type="text/javascript">
function propHasChanged()
{
         document.getElementById('ValidationSummaryExtras').style.display = document.getElementById('ctl00_UCPlaceHolder1_ctl00_ValidationSummaryClient').style.display;
}
</script>

<asp:ValidationSummary ID="ValidationSummaryClient" runat="server" onpropertychange="propHasChanged()" />

(You may also want to set the ValidationSummaryExtras's initial display mode to "none")

The harder way:
There is a page level event that you can attach to in javascript which is fired whenever page validation occurs.  Unfortunately, I can't remember the event name and I've been googling for a while, but can't seem to find it again... That's what makes this the harder way... actually finding the name of the event.
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
bemara57Author Commented:
Bane83, I tried your suggestion about the onpropertychange and it's pretty quarky in IE and doesn't even work in Firefox. So I searched about the 'hard way', and you were right, that is the way to go but took awhile to actually find all the pieces on Google and put it together. Check what I ended up doing- it works perfectly:

function SaveValidator(validationSummaryClientID)
{
    validationSummaryClient = document.getElementById(validationSummaryClientID).style;
    validationOuterDiv = document.getElementById('ValidationSummaryClient').style;
    var validateFlag = true;

    if (typeof(Page_ClientValidate) == 'function')
    {
        Page_ClientValidate();
        validateFlag = ValidationSummaryOnSubmit();
    }

    if (validateFlag)
    {        
        validationSummaryClient.display = 'none';
        validationSummaryClient.visibility = 'hidden';
        validationOuterDiv.display = 'none';
        validationOuterDiv.visibility = 'hidden';
        FreezeScreen('off');
    }
    else
    {
        validationSummaryClient.display = 'block';
        validationSummaryClient.visibility = 'visible';
        validationOuterDiv.display = 'block';
        validationOuterDiv.visibility = 'visible';
        FreezeScreen('error');        
    }
       
    return validateFlag;
}

It looks complicated but it's really not. The Page_ClientValidate() sets the Page_IsValid flag. Then the ValidationSummaryOnSubmit() takes the flag value and resets the Page_IsValid back to normal. Then I put the whole SaveValidator in the onclick of my submit button. Oh and also I had to disable the CauseValidation to false so the whole validation thing doesn't happen twice with the submit button. It might look messy but it's a pretty clean method. Thanks for the direction.
0
 
bemara57Author Commented:
Just for easy reference, this how my what I did with the button in .net- hope this helps someone else:
saveButton.Attributes.Add("onclick", "return SaveValidator('" +
            ValidationSummaryClient.ClientID + "');");
0
 
bemara57Author Commented:
Sorry, I think it's better to use ValidatorOnSubmit() than ValidationSummaryOnSubmit(), don't ask me why tho ?
0

Featured Post

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now