If you have added some ASP.NET validators to a webform, you might want to run them before hitting the submit button. In BlogEngine.NET we need to run the validators when a new comment is about to be added, but because it is using AJAX to post the comment we don’t submit the form.

The form is only used to take advantage of the validators and the server controls such as TextBox and they are still needed for clients that don’t support AJAX. What we needed was a way to validate the page from a custom JavaScript function.

Whenever a validator is added to a webform, a reference to the WebResource.axd JavaScript file is added as well. In here is all the mechanics used to do client-side validation and a lot of other useful things. It holds a function called Page_ClientValidate() which runs all the validators and returns true if all validators validates, otherwise it returns false. It also makes sure to show the error message of the validators that fail.

You can use it from within a button by specifying the onclick client-side event like so:

<input type="button" value="Save" onclick="if(Page_ClientValidate()){DoSomething()}" />  

If the Page_ClientValidate() function returns false, nothing happens and the error message of the individual validators that failed is shown. If it returns true, then everything validates and you can proceed. Just remember to do a manual server-side validation as well.

I’ve been using Visual Studio 2005 for almost 2½ years since the beta 1 release. In all that time, I’ve used Firefox and Firebug for all JavaScript debugging. I’ve tried setting breakpoints in JavaScript in Visual Studio before, but I never got it working so I left it for Firebug. Then the other day, our new developer at Traceworks told me that Visual Studio could be used for debugging and that it is possible to set breakpoints in the JavaScript files.

This of course illustrates that I’m slow – 2½ years slow to be exact. For those of you, who are as slow as me, keep reading and I’ll tell you how to debug JavaScripts in Visual Studio.

Set up Internet Explorer

Internet Explorer has disabled the possibility to debug scripts by default, so the first thing to do is to enable it. In the top menu, go to Tools -> Internet Options -> Advanced. Here you need to remove the checkboxes in Disable script debugging. This is needed for Internet Explorer to tell Visual Studio about the JavaScript running in the browser.

Start debugging

In included .js files you are now able to set break points as you normally would in C# or VB.NET. The execution stops at the break point and you are able to see the values of the variables and to move forward by hitting F10 and F11 like normal. The experience is exactly the same as debugging C# code.

For inline JavaScript you cannot set break points, but Microsoft did provide us with an alternative. If you add the word debugging wherever you want in the script code, the execution will stop at the word and you can debug exactly the same way as setting a break point.

For this to work, you must run Visual Studio in debug mode. That’s it, extremely powerful and easy to do. The only thing I don’t like about this is that I didn’t know about it before now. C’est la vie.