Globally modify validator’s any property, using JQuery.

Often we need to alter many attributes of validators from one centralized place/globally. One possible scenario, can be — say when the application is almost ready, a change request hits, to modify certain characterstics of the validators, application wide.

In this example below, I try to make sure that the error messages for any validator appears below the respective control. This is just an example , but on a similar basis , we can alter any attribute of the validator globally , like error message, applying css etc etc. The idea is very simple. ASP.Net validators are rendered as span elements.I added this script in my master page, which runs a loop for all the span elements — & — implements whatever change is required. Now in a form, we can have other regular span elements too. SO the code differentiates and runs a check & then loops through Validator control related span elements only.

MasterPage global script which every Submit button invokes.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
<html xmlns="" xml:lang="en">
<head runat="server">
    <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
    <script src="" type="text/javascript"></script> 
    <asp:ContentPlaceHolder ID="HeadContent" runat="server">
<form runat="server">
<script type="text/javascript">
function abc() {
if (typeof (Page_ClientValidate) == 'function') {
$('span').each(function () {
    var t1 = $(this);
    var t2 = $(this)[0].errormessage;
    if (typeof t2 == 'string') { 
      //check if it is the validator control Or other regular span element
        t1[0].innerHTML = "<br>" + t1[0].innerHTML;
    <div class="page">
        <div class="header">
            <div class="title">

Content Page.

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" 
ErrorMessage="RequiredFieldValidator1" Text="****" ControlToValidate="TextBox1"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="regv" runat="server" ControlToValidate="TextBox1" ValidationExpression="^\d{5}-\d{4}|\d{5}|[A-Z]\d[A-Z] \d[A-Z]\d$" 
ErrorMessage="Incorrect Zip format" ForeColor="Red" Text="****" Display="Dynamic" ></asp:RegularExpressionValidator>
<br />
<span id="g1">Regular Span text</span>    
<br />
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" 
ErrorMessage="RequiredFieldValidator2" ControlToValidate="TextBox2"></asp:RequiredFieldValidator>
<br /><br />
<asp:Button ID="Button1" runat="server" OnClientClick="return abc();" onclick="Button1_Click" Text="Button" />

Hope this helps. Thanks for reading.

This entry was posted in JQuery. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s