Never trust user input!

This week at MIX10, Phill Haack had a presentation on what is new with ASP.NET MVC 2.0. The following is a list of the new features in ASP.NET MVC 2.0 from Scott Guthrie’s blog

• New Strongly Typed HTML Helpers
• Enhanced Model Validation support across both server and client
• Auto-Scaffold UI Helpers with Template Customization
• Support for splitting up large applications into “Areas”
• Asynchronous Controllers support that enables long running tasks in parallel
• Support for rendering sub-sections of a page/site using Html.RenderAction
• Lots of new helper functions, utilities, and API enhancements
• Improved Visual Studio tooling support

I have recently been tinkering with an amazing validation engine in jquery from Cedric Dugas. I thought to myself, what an awesome idea it would be to try and minimize the effort of adding the validation engine to the Model Validation inside ASP.NET MVC 2.0.

The first step was to determine where the validation was taking place.

Inside of jquery.validate.js, I found the formatAndAdd function on line number 574. After the error message is constructed, I added the validationEngine.buildPrompt function which is a way for developers to utilize the nice looking prompt that is packaged as part of the plugin.

formatAndAdd: function(element, rule) {
    var message = this.defaultMessage(element, rule.method),
	theregex = /\$?\{(\d+)\}/g;
    if (typeof message == "function") {
        message = message.call(this, rule.parameters, element);
    } else if (theregex.test(message)) {
        message = jQuery.format(message.replace(theregex, '{$1}'), rule.parameters);
    }
    $.validationEngine.buildPrompt(element, message, "error");
    this.errorList.push({
        message: "",
        element: element
    });

    this.errorMap[element.name] = message;
    this.submitted[element.name] = message;
},

Step two to determine where the errors are removed, when they have passed the validation rule.

I found an unhighlight function on line 259 of the jquery.validate script. This code doesn’t remove the error, but it does remove the highlighting from the control. I decided to tie into this piece of code by adding the closePrompt method from the validation engine.

unhighlight: function(element, errorClass, validClass) {
    $.validationEngine.closePrompt(element);
    $(element).removeClass(errorClass).addClass(validClass);
}

The final step is to initialize the validation engine.

on line 50, after the submit button was clicked, we will initialize our validation engine.

if (validator.settings.onsubmit) {
    $(validator.currentForm).validationEngine();

Here is the sample code. To utilize this code, all you will need to do is get the latest version of the Validation Engine and replace the jquery.validation.js with this one.

jquery.validate.js (48.89 kb)

ValidationDemo.zip (391.38 kb)

Update : An Update from the Validation Engine guru over at position-absolute now removes the box when you click on it, if it’s in the way.