jQuery Validation Plugin

We start to see several plugins in the web based on the jQuery library. I have the chance today to work a bit with a plugin called: jQuery Validation Plugin by Jörn Zaefferer - which enable you to apply client validation to your web forms using jQuery.

To get started, you have to download the plugin files from this link. And sure the jQuery library as well: jQuery 1.2.2. Then, you should have: jquery.validate.js and jquery.js files reside on your project somewhere and linked in your markup.

IMPORTANT NOTE: I had a problem when using jquery.validate with the new vesrions - higher than 1.2.2 - of jQuery library. jquery.validate uses functions in jQuery library which no longer exist.

The following sample is the simplest one. You use the selector to get the form element. Then, you call the validate function.

<script language="text/javascript">
    $(document).ready( function() {
         $("#simpleSignUp").validate();
    }
</script>

In this case, you will have to set some predefined metadata in the class attribute of the elements telling the library the required rules to apply for the form inputs.

<form id="simpleSignUpForm" action="" method="get">
        <input type="text" id="firstname" class="required" minlength="2"/>
        <input type="text" id="lastname" class="required" minlength="2"/>
        <input type="text" id="username" class="required" minlength="2"/>
        <input type="text" id="email" class="required email" minlength="2"/>
        <input type="text" id="password" class="required" minlength="8" />
        <input type="text" id="website" class="url" />
        <input type="submit" value="Submit" />
</form>

In this case, the plugin will use some defaults error messages for validating the inputs. However, you can have more controls on the errors and rules. The following sample show in details how you can validate a full sign up form elements by specifying the rules with the associated error messages. In this sample, you won't have to apply any CSS styles as you already defines explicitly your rules.

<script type="text/javascript">
        $(document).ready( function() {
               $("#signupForm").validate({
                           rules:{
                                           username:{
                                                               required:true,
                                                               minlength:2
                                           },
                                           password:{
                                                               required:true,
                                                               minLength:5
                                           },
                                           confirm_password:{
                                                               required:true,
                                                               minlength:5,
                                                               equalTo:"#password"
                                           },
                                           email:{
                                                               required:true,
                                                               email:true
                                           },
                                           topic:{
                                                               required:"#newsletter:checked",
                                                               minLength:2
                                           },
                                           agree:"required"
                            },
                            messages:{
                                           username:{
                                                               required:"Please enter a username",
                                                               minLength:"Your username must consist of at least 2 characters"
                                           },
                                           password:{
                                                               required:"Please provide a password"                                                                minLength:"Your password must be at least 5 characters long"
                                           },
                                           confirm_password:{
                                                               required:"Please provide a password",
                                                               minLength:"Your password must be at least 5 characters long",
                                                               equalTo: "Please enter the same password as above"
                                           },
                                           email: "Please enter a valid email address",
                                           agree: "Please accept our policy"
                            }
               });
        }
</script>

For more information about the methods you can use for the validation, check it here.

The way you define your rules and messages are unified and configurable. You define a message per rule which is extremely a need in any web project. It's common to have several validation rules with different error messages in the same web form. When I see this style, I just remember the Design by Contract style in which your requirements (contract) are easily mapped to rules (benefits and obligations). It's similar as you put all your quality matrix in one place. Besides, it's easy to modify as like as you set some configurations to your web form!

Another point to mention is the different scenarios you can have and how this library fit it. In the last sample, you can see how you check for password confirmation, input formats (emails, URLs ... etc.) and user selections.

You can modify the CSS style of your validation errors - i.e how the input controls will look like in case of a validation error occurred. You simply modify the following snippet to have different look for the validated inputs.

div.error { display: none; }
input { border: 1px solid black; }
input:focus { border: 1px dotted black; }
input.error { border: 1px dotted red; }

This plugin is perfect for ASP.NET MVC. Actually, there is already some tries like Validator Toolkit for ASP.NET MVC which enable client and server side validation for MVC. It uses jQuery as well for the client validation. I don't think jQuery Validation is easy to be used in ASP.NET web forms as the page structure actually differs. However, we may find some other versions suitable for ASP.NET Web Forms in the future.

Unlike the ASP.NET validation controls which you need to inject inside your markup, jQuery Validation Plugin puts all the validation rules in one place. I think this really a benefit. In fact, this is one of the benefits of using jQuery itself - thanks for the nice selectors. This style definitely enhance your code readability by separating the validation stuff away from the markup giving the designers - and even the devs - more clean markup to work in.

Get the Last Run Query in SQL Server 2005

Have you ever run an update or delete query by mistake and you need to roll back or at least want to know the last run query to fix the problem? The following SQL statement can help in that.

SELECT deqs.last_execution_time AS [Time], dest.text AS [Query]
FROM sys.dm_exec_query_stats AS deqs
CROSS APPLY sys.dm_exec_sql_text(deqs.sql_handle) AS dest
ORDER BY deqs.last_execution_time DESC

This will retrieve the last run queries with its execution time.

Inversion of Control & Dependency Injection

In the last Thursday, 28th Feb. 2008, we had our internal demoday in SK. The day was really informative. We had many interesting topics in different fields. My topic was an introduction about the inversion of control and the dependency injection. You can download it from here:

Download: Internal_Demoday_28_2_08_IoC_DI.pptx

N.B: Most of the examples in the presentation use Sprint.NET as a DI framework.

If you want to go deeper in the topic, I recommend the following article: Inversion of Control Containers and the Dependency Injection pattern. The author is Martin Fowler - Chief Scientist, ThoughtWorks - and the article is considered to be the ideal reference for the topic.