Click here to Skip to main content
15,614,943 members
Articles / Web Development / ASP.NET
Posted 26 Jun 2008


18 bookmarked

Dynamic Javascript Validation Message Panel

Rate me:
Please Sign up or sign in to vote.
3.13/5 (7 votes)
26 Jun 2008CPOL
This article describes creation of dynamic Javascript Message Panel that used to display validation failed error messages.


During development we come across lots of client side validations and we normally use .Net validator controls.These controls give us the feature to display the client-side validation messages in 'Summary' like panel. In some places we need clean javascript validation that has to be used to serve our purpose.In such cases we want to display these messages not as alert message but to be displayed as inline form messages.


Below is the javascript code that creates dynamic message panel.

function HideServerValidationPanel(panelID)
        if (document.getElementById(panelID) != null)
            document.getElementById(panelID).style.display = "none";
    function DisplayErrors(errorMessages)
        if (errorMessages != null && errorMessages.length > 0)
             return false; 
            return true;
    function LoadValidationErrorPanel(arrMessage)
        var myMain =  document.getElementById ("MainErrorTag");
        if (myMain.firstChild != null)
        var myDiv = document.createElement("div");
        var myUL = document.createElement("ul");
        var myPara =  document.createElement("p");
        var myImg = document.createElement("img");
        var myDesc = document.createElement("strong");
        myDiv.className = "ofWrapper";
        //myImg.className = "xxx";
        //myDesc.className ="yyy"

        myImg.setAttribute ("src","Cross.JPG");        
        myDesc.innerText = "Please correct the following details before proceeding ..." ;
        var myLi;
        for(var j= 0; j < arrMessage.length;j++)
            myLi = document.createElement("li");
            myLi.innerText = arrMessage[j];
           // myLi.className = "abc";
    function SetFocus(ControlField, isFocusSet)
        if (isFocusSet == false)
            return true;
            return false;
    function ValidateMyScreen()
        var Errors = new Array();
        var ErrorCounter = 0;
        if (document.getElementById('<%=TextBox1.ClientID%>').value == '')
            Errors[ErrorCounter++] = "Data1 is required.";   
        if (document.getElementById('<%=TextBox2.ClientID%>').value== '')
            Errors[ErrorCounter++] = "Data2 is required.";   
    return DisplayErrors(Errors);

Here is the html code where we have placed server side error message panel and client side DIV tag to display our messages. The dynamic javascript panel created at run time is appended to div tag ID ="MainErrorTag".

<asp:Panel runat="server" ID="pnlMessage">            
            <asp:Label ForeColor="Red" runat="server" ID="lblServerError"></asp:Label >            
        <div id="MainErrorTag">            


The above code is easy to use. One can create a style sheet to design message panel and create one common javascript file to use it across web pages.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By
Technical Lead
Australia Australia
Whatsup-->Exploring--> MVC/HTML5/Javascript & Virtualization.......!

Comments and Discussions

GeneralMy vote of 1 Pin
Dhanoop729-Mar-12 19:14
Dhanoop729-Mar-12 19:14 
GeneralUse Existing Controls Pin
nickyt9-Jul-08 7:27
nickyt9-Jul-08 7:27 
Why not use the existing ASP.NET control ValidationSummary?

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

<html xmlns="" >
<head runat="server">
<title>Untitled Page</title>
<style type="text/css">
background-image: url('');
background-repeat: no-repeat;
background-color: #008900;
padding-left: 30px;

.info ul { color: #ffffff; }
<form id="form1" runat="server">
<asp:ValidationSummary CssClass="info" Style="color: #ffffff;"
ID="ValidationSummary1" runat="server" HeaderText="Please correct the following before proceeding:" />
<br />
Test fields<div>
Field 1
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><asp:RequiredFieldValidator
ID="RequiredFieldValidator1" runat="server" ErrorMessage="RequiredFieldValidator" ControlToValidate="TextBox1">*</asp:RequiredFieldValidator><br />
Field 2&nbsp;
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox><asp:RequiredFieldValidator
ID="RequiredFieldValidator2" runat="server" ErrorMessage="RequiredFieldValidator" ControlToValidate="TextBox2">*</asp:RequiredFieldValidator><br />
<asp:Button ID="Button1" runat="server" Text="Button" /></div>

GeneralImprovements to Your JavaScript Pin
nickyt7-Jul-08 3:50
nickyt7-Jul-08 3:50 
GeneralRe: Improvements to Your JavaScript Pin
santosh poojari27-Jul-08 20:14
santosh poojari27-Jul-08 20:14 
GeneralNice Idea Pin
ryanoc33327-Jun-08 2:05
ryanoc33327-Jun-08 2:05 
GeneralRe: Nice Idea Pin
santosh poojari29-Jun-08 17:58
santosh poojari29-Jun-08 17:58 
Generalgood artical Pin
Gautam Sharma26-Jun-08 23:31
Gautam Sharma26-Jun-08 23:31 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.