Set Focus on Validation Summary Text - and Formating of. 1

[iaresean]

Hi All;

Does anybody know of a way to set focus on the validation summary text, specifically when the client side validation occurs.

I have a really long form that users scroll down. When they click on submit at the bottom the page gets validated and a validation summary is displayed at the top of the page if validation fails. However, the user may not be aware of this as they currently have to scroll to the top of the page to see it. I was hoping that the summarytext would recieve focus - it makes logical sense to me.

Also, the validation summary control isn't the most visually appealing of controls. Does anybody know of some clever tips on how I might make it more stimulating? Links would be appreciated too!

Thank you for any and all help!

Sean.

 

[ca8msm]

I guess the only way to focus it if you are performing client-side validation will be with client-side code (specifically the "focus" method of JavaScript). If you are doing server-side validation, try experimenting with Page.SetFocus or the Focus method of the ValidationSummary control.

As for the styling, the ValidationSummary control (like most other server controls) has a CssClass attribute you can set a specific CSS class and style it exactly how you want.


____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

 

[iaresean]

Hi ca8msm;

Yes the javascript focus() would be my option for client side focusing, but does anybody perhaps know how I might go about coding this in my app so that the focus get fired when the summary text is displayed? If it was an html control I could have used the onChanged() javascript command, but that obviously isn't available to me in this case.

Regarding the styling, yes I have applied a css style to my control, but it is fairly limited in providing a 'more' visually stimulating summary text. For eg. setting seperate styles for the header text (maybe adding a background colour for the header text too), etc...

I am not too worried about the styling issue, I merely brought it up in hopes that I may get some valuable replies.

Thanks again for the quick response.

Sean.

 

[jbenson001]

I guess you can code a javacript function that is run on the load of the page that checkes if the validationsummary control is visible, if so set focus.

Jim

 

[ca8msm]

I heven't used the ValidationSummary control much but there is an OnLoad event. Perhaps you could try experimenting with this?

As for the CSS, the ValidationSummary control renders itself inside a table so you could easily set a style for the first row and then a seperate style for each other row (it will make it easier if you wrap the control inside a "div" element and give it an id as you can then specify this in your CSS).


____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

 

[iaresean]

Yes, I did think of the page load and onload event, however, I think these are server side rather than client side solutions.

ca8msm, the table thing sounds very promising indeed, I will look into this now and post results.

Thanks for the quick responses guys!

Sean.

 

[iaresean]

Hmmm... I used the web developers tools (an amazing extension - one of my favs besides the IE tab extension) of FireFox to outline all tables/tablecells. It seems as though the summary control is contained within a div, not a table. :-(

And just like that my hopes were crushed. Oh well, it was more of a passing interest that a requirement to style the summary text.

Will be googling to try and find more info on setting focus of the control. Will post results.

Cheers;

Sean.

 

[jbenson001]

Why does it matter if the focus happens client or server side? In order for the validationsummary control to become visible, a post back has to happen. So that is why I suggested placing a javascript function in the page, that is fired each time the page loads. It can check if the control is visible, if so, set the focus.

 

[iaresean]

Is that correct? I thought that, if set, client side validation would occur with any postback occuring. After the client validation succeeds the page would post to server, where server side validation would be fired (handy for checking against those who disabled their javascript).

If I am wrong, I am going to have a serious rethink of things. I will try out your recommendation and see what comes up.

Cheers;

Sean.

 

[jbenson001]

Actually ignore my post.. You are correct, the validation is done completly client side..

My bad.. sorry.... I had a brain fart...

 

[ca8msm]

It doesn't actually matter what is rendered by the ValidationSummary as you can apply CSS to whatever is rendered. I'll knock up a quick example for you tomorrow.


____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

 

[iaresean]

Hey all;

I finally got the focus working on my validation summary text. I ran into a few hurdles, one being the fact that divs don't support the focus command. But I have resolved everything, solution:

The first thing I did was I changed the <asp:Button that I used for submitting to a traditional <input type="submit" control so that I could expose the onclick javascript event.

Next thing I did was encapsulate my summary control within a div called valsummary. I then created a 'dead' a link in it which I could then use to set focus too.

Well, I won't go on about it too much, you can pretty much work it out from the code extract below:

function setFocus(layerName) {
  var layer = document.getElementById(layerName);
  var focusIt = layer.getElementsByTagName('a')[0];//This is an array, get the first link.
  focusIt.focus();
}

<div id="valsummary">
        <a id="focuspoint" href="javascript:void(null)" style="cursor: default"></a>
        <asp:ValidationSummary ID="ValidationSummary1" EnableClientScript="true" 
                CssClass="ErrorMessage" Width="726px" runat="server" 
                HeaderText="The following information needs correction:" 
                ShowMessageBox="False" ShowSummary="True" />
</div>

<input type="submit" causesvalidation="true" runat="server" class="FormButton" onclick="setFocus('valsummary');"                             id="btnSubmit" value="Submit" />

Sean.

 

[ca8msm]

The first thing I did was I changed the <asp:Button that I used for submitting to a traditional <input type="submit" control so that I could expose the onclick javascript event.

You don't actually need to do that bit. The ASP.NET server control simply renders a HTML input anyway so you just need to add the onclick event to it as normal (you can use Attributes.Add if you want to do it via code).


____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

 

[ca8msm]

Also, here's a simple example of how the ValidationSummary control's output could be changed to look differently:

<asp:ValidationSummary ID="ValidationSummary1" runat="server" EnableClientScript="true" ShowSummary="true" HeaderText="<span class='myHeader'>Here are your errors:</span>" DisplayMode="SingleParagraph" />

    <style type="text/css">
    .myHeader
    {
        color: Blue;
    }
    </style>

This simply changes the HeaderText to a blue text and displys the errors in a simple paragraph style rather than in a bulleted list.

You can obviously modify the control to look however you want but this is just to show that it can be done.


____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

 

[iaresean]

Awesome! Will definitely put to use.

Thanks for the tips!

Sean.