ASP.NET Validators Pimped using jQuery

I was looking for a solution which will improve how Error Message is displayed while using Validators like RequiredFieldValidator. I love jQuery and I was looking for something to Pimp my validators using jQuery. I found few solutions but I was not satisfied with that. So I planned to code it myself.

here is the Screenshot of how Validators will look like:

As you can see from the screenshot, The validators looks better than what is provided by Microsoft.

The main part of the code is JavaScript code which can be used in any existing application.

Here is the Code:

$(document).ready(function () {
    $('.causeValidation').click(function () {
        $('.error-message').remove();
        var grp = $(this).parent().attr("class");
        $.each(Page_Validators, function () {
            if (this.validationGroup == grp || grp == "") {
                this.style.display = 'none';
                var $control = $('#' + this.controltovalidate);
                if (!this.isvalid) {
                    $control.parent().addClass('validation-error');
                    $control.parent().append('' + this.errormessage + '');
                    $control.focus(function () {
                        $('.error-message', $(this).parent()).remove();
                        $(this).parent().removeClass('validation-error');
                    });
                }
            }
        });
    });
});

The above code disables error messages from regular Validators and replace them with custom one.

This validator also support ValidationGroup. If you have more than one forms on same page and you want to validate each of them separately, you need to do a simple tweak. I will explain that later on.

For now for the code to work, You have to assign CssClass “causeValidation” to Button.

Here is the aspx code for this example:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>





    
    
    






                
                    User Name
                
                
                
            

                
                    Password
                
                
                
            

                
                    First Name
                
                
                
            

                
                    Last Name
                
                
                
            

                
                    City
                
                
                
            

                
                    
                
            

As you can see btnTest is assigned a CssClass “causeValidation”.
You can also set Display property of the Validators to None;

The appearance of the form is controlled by CSS. You can modify it according to your needs.

Here is the CSS code used for this example:

body{font-family:Calibri; font-size:14px; color:#888; background-color:#fefefe;}

.form{width:500px; margin:auto; border:6px solid #CCE7F4;}
.form .columns div{padding:5px; background-color:#EEF7FB; border-bottom:1px solid #CCE7F4; margin-bottom:1px;}
.form label{display:inline-block; width:150px; font-weight:bold; font-size:15px;}
.form input[type="text"], .form input[type="password"]{font-size:15px; padding:5px; width:300px; border:2px solid #CCE7F4;}
.form .validation-error *{color:Red;}
.form .validation-error label{color:Red;}
.form .validation-error input{border: 1px solid #CC0000; background: #FCF0EF url(images/error-bg.png) repeat-x top; color: #CC0000; margin-right: 5px;}
.form .error-message{display:block; font-style:italic; background:url(images/icon_error.png) no-repeat;margin:5px; padding-left:20px; margin-left:150px;}

Implementing for ValidationGroup

lets say you have ValidationGroup named “grpInsert” for a form. You have to assign Class of same name as ValidationGroup to the parent element of the button.

Example:

Button Goes Here

Important:

You should always enclose Button to container element with no class if you are not using any ValidationGroup. in my example,I have used

Here is the Source code for above example.