Globally modify validator’s any property, using JQuery.

Often we need to alter many attributes of asp.net 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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
    <title></title>
    <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.js" type="text/javascript"></script> 
    <asp:ContentPlaceHolder ID="HeadContent" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
<form runat="server">
<script type="text/javascript">
function abc() {
if (typeof (Page_ClientValidate) == 'function') {
    Page_ClientValidate();
}
$('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;
    }
});
}
</script>
    <div class="page">
        <div class="header">
            <div class="title">
                <h1>

Content Page.

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">
</asp:Content>
<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" />
</asp:Content>

Hope this helps. Thanks for reading.

Advertisements
This entry was posted in JQuery. Bookmark the permalink.

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s