Using jQuery ValidationEngine in an ASP.NET - multiple forms

If you have found this post then chances are you are using the great ValidationEngine (jQuery-Validation-Engine) plugin with your ASP.NET application.

Everything work fantastic until you want two separate sets of validation on one page.  Within PHP you can simply wrap each logical sets of validation within their own <form> tags but this is not possible with asp.net.

Instead this is the approach I have used:

Within a set of script tags at the top of my page I put the following (I do have "var $j = jQuery.noConflict();" ):

     $j(document).ready(function () {

        $j("#btnSave").click(function (e) {

            var stopForm = false;

            if ($j("#txtForename").val() == "") {

                $j('#txtForename').validationEngine('showPrompt', 'You must enter a First name', 'error', 'topRight', true);

                stopForm = true;

            } else {

                $j('#txtForename').validationEngine('hide');

            }

   if (stopForm) {

                e.preventDefault();

            }

        });

1. The above waits for the click event to be fired on the btnSave button.
2. Sets a boolean variable to false
3. Checks to see the that textbox object txtForename has a value
4. If it doesn't that it attaches a popup notification and sets the stopForm variable to true
5. If there is a value it makes sure that any previous popup that may have been added to the control is closed
6. Finally the method checks to see if the stopForm variable is set to true, if it is then it calls the e.preventDefault() menthod which will ensure that the btnSave click event is not passed back to the server, allowing your user to address the highlighted issue.

I recommend having the ClientIDMode="Static" declaration on your page to ensure that jQuery can get expected access tot he controls in the DOM.

jQuery Validationengine arrows not showing (ASP.NET)

On a recent project the customer wanted to display custom error messages.  To achieve this I had to write my custom validation method as opposed to using the css="validate[required]".

This was fine until I hit the issue where by when calling the showPrompt method as follows:

if ($j("#lstCustomerType").val() == "") {
             jQuery('#lstCustomerType').validationEngine('showPrompt', 'Please select a customer type', 'error', true);
     }

The validation message was showing but was not including the nice little arrow despite me passing the variable of "true" for this optional parameter.

The solution for this was to pass all the optional variables through to the method as follows:

             jQuery('#lstCustomerType').validationEngine('showPrompt', 'Please select a customer type', 'error', 'topRight', true);