CodeProject: Dynamic Javascript Validation Message Panel. Free source code and programming help

Announcements

	Windows 7 Comp Win a laptop!
	Monthly Competition

Articles

Desktop Development

Web Development

Enterprise Systems

Content Management Server

Microsoft BizTalk Server

SQL Reporting Services

Platforms, Frameworks & Libraries

Windows Communication Foundation

Windows Presentation Foundation

Windows Workflow Foundation

Cryptography & Security

Threads, Processes & IPC

WinHelp / HTMLHelp

Uncategorised Quick Answers

Graphics / Design

Expression

Usability

Development Lifecycle

Debug Tips

Design and Architecture

Uncategorised Technical Blogs

Services

Code-signing Certificates

Job Board

CodeProject VS2008 Addin

Feature Zones

Product Showcase

Code Signing Resources

WhitePapers / Webcasts

ASP.NET Web Hosting

Advanced Search
Add to IE Search

Discuss

Report

5 votes for this article.

Popularity: 1.82 Rating: 2.60 out of 5

Download SourceCode - 2.91 KB

Introduction

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.

Background

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)
        {
             LoadValidationErrorPanel(errorMessages); 
             
             return false; 
        }
        else
        {
            return true;
        }
       
    }
    function LoadValidationErrorPanel(arrMessage)
    {
        
        var myMain =  document.getElementById ("MainErrorTag");
        if (myMain.firstChild != null)
        {
            myMain.removeChild(myMain.firstChild);
        }        
        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 ..." ;
       
        myPara.appendChild(myImg);
        
        myPara.appendChild(myDesc);
        myDiv.appendChild(myPara);
        var myLi;
        for(var j= 0; j < arrMessage.length;j++)
        {
            myLi = document.createElement("li");
            myLi.innerText = arrMessage[j];
           // myLi.className = "abc";
            myUL.appendChild(myLi);
        }
        myDiv.appendChild(myUL);
        myMain.appendChild(myDiv);
    }
    function SetFocus(ControlField, isFocusSet)
    {
        if (isFocusSet == false)
        {
            controlField.focus();
            return true;
        }
        else
            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.";   
        }    
              
    HideServerValidationPanel('<%=pnlMessage.ClientID%>');
    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 >            
        </asp:Panel>            
        <div id="MainErrorTag">            
        <div>

Conclusion

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.

License

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

About the Author

santosh poojari

Member

He is a Team Lead currently working with one of the IT company in India.His overall experience in IT field is 7 years. He is a B.E (computers) graduate from Mumbai University.
His area of Interest is Microsoft Technology : Asp.Net,C#,Web services,SSIS,SSRS,Windows Workflow Foundation 3.0,SQL server 2005,State Machine Compiler,Regular Expression, Enterprise Library3.0,Spring.net,Design Patterns and Architecture Design.He is MCPD-EA Certified.

http://santoshpoojari.blogspot.com

Occupation:	Team Leader
Location:	India

Other popular ASP.NET articles:

Multiple File Upload With Progress Bar Using Flash and ASP.NET
How to use Flash to upload multiple files in a medium-trust hosting environment
CAPTCHA Image
Using CAPTCHA images to prevent automated form submission.
10 ASP.NET Performance and Scalability Secrets
10 easy ways to make ASP.NET and AJAX websites faster, more scalable and support more traffic at lower cost
Exploring Session in ASP.Net
This article describe about session in ASP.Net 2.0 . Different Types of Session , There Configuration . Also describe Session on Web Farm , Load balancer , web garden etc.
Paging of Large Resultsets in ASP.NET
An article about optimization and performance testing of MS SQL Server 2000 stored procedures used for paging of large resultsets in ASP.NET

Article Top

You must Sign In to use this message board.

FAQ
Noise Tolerance Layout Per page

Msgs 1 to 6 of 6 (Total in Forum: 6) (Refresh)

FirstPrevNext

Use Existing Controls

nickyt

8:27 9 Jul '08

Improvements to Your JavaScript

nickyt

4:50 7 Jul '08

Santosh,

Here's some improvements for your JavaScript. There's more that can be improved, but here's some suggestions.

Later,
Nick Smile

    function HideServerValidationPanel(panelID)
    {    
        var panel = document.getElementById(panelID); // or use $get if using ASP.NET AJAX
        
        if (panel)
            panel.style.display = "none";     
    }
    
    function DisplayErrors(errorMessages)
    {        
        //if (errorMessages != null && errorMessages.length > 0)
        // Checking the length > than zero is not necessary. 0 is interpreted as false
        // Checking errorMessages is null is redundant. An undefined object == false.
        var showErrors = errorMessages && errorMessages.length;
        if (showErrors)
             LoadValidationErrorPanel(errorMessages); 
             
        return !showErrors;       
    }
    
    function LoadValidationErrorPanel(arrMessage)
    {
        
        var myMain =  document.getElementById ("MainErrorTag");
        
        //if (myMain.firstChild != null) null check is redundant. An undefined object == false.
        if (myMain.firstChild)
            myMain.removeChild(myMain.firstChild);
    
        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.setAttribute("src","Cross.JPG");        
        myDesc.innerText = "Please correct the following details before proceeding ..." ;
       
        myPara.appendChild(myImg);
        
        myPara.appendChild(myDesc);
        myDiv.appendChild(myPara);        
        var myLi;
        
        for(var j= 0; j < arrMessage.length;j++)
        {
            myLi = document.createElement("li");
            myLi.innerText = arrMessage[j];
            myUL.appendChild(myLi);
        }
        
        myDiv.appendChild(myUL);
        myMain.appendChild(myDiv);
    }
    
    function SetFocus(ControlField, isFocusSet)
    {
        //if (isFocusSet == false) == false is not required. Just do !isFocusSet
        if (!isFocusSet)
            controlField.focus();

        return !isFocusSet;
    }
    
    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.";   
        }    
              
    HideServerValidationPanel('<%=pnlMessage.ClientID%>');
    return DisplayErrors(Errors);
    }