5,699,997 members and growing! (19,667 online)
Email Password   helpLost your password?
Web Development » ASP.NET » General     Beginner License: The Code Project Open License (CPOL)

Dynamic Javascript Validation Message Panel

By santosh poojari

This article describes creation of dynamic Javascript Message Panel that used to display validation failed error messages.
Javascript, .NET (.NET 1.0, .NET 1.1, .NET 2.0, .NET 3.0, .NET 3.5, .NET), ASP.NET

Posted: 26 Jun 2008
Updated: 26 Jun 2008
Views: 5,647
Bookmarked: 12 times
Announcements
Loading...



Search    
Advanced Search
Sitemap
4 votes for this Article.
Popularity: 1.40 Rating: 2.33 out of 5
2 votes, 50.0%
1
0 votes, 0.0%
2
1 vote, 25.0%
3
0 votes, 0.0%
4
1 vote, 25.0%
5
Note: This is an unedited contribution. If this article is inappropriate, needs attention or copies someone else's work without reference then please Report This Article

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


He is a Team Lead currently working with a software company in India.He has overall 5.5 years of experience in .net technology. He is a B.E in computers from Mumbai University. His area of Interest is Microsoft Technology : Asp.Net,C#,Web services,SSIS,SSRS,Windows Workflow Foundation 3.0,State Machine Compiler,Regular Expression, Enterprise Library3.0,Spring.net,Design Patterns and Architecture Design.
He is MCPD-EA Certified.

He loves playing Cricket,Driving,Music and Drawing Sketches.
Occupation: Team Leader
Location: India India

Other popular ASP.NET articles:

Article Top
Sign Up to vote for this article
You must Sign In to use this message board.
FAQ FAQ Noise ToleranceSearch Search Messages 
 Layout  Per page   
 Msgs 1 to 6 of 6 (Total in Forum: 6) (Refresh)FirstPrevNext
GeneralUse Existing Controlsmembernickyt8:27 9 Jul '08  
GeneralImprovements to Your JavaScriptmembernickyt4:50 7 Jul '08  
GeneralRe: Improvements to Your JavaScriptmembersantosh poojari21:14 27 Jul '08  
GeneralNice Ideamemberinetfly1233:05 27 Jun '08  
GeneralRe: Nice Ideamembersantosh poojari18:58 29 Jun '08  
Generalgood articalmemberGautam Sharma0:31 27 Jun '08  

General General    News News    Question Question    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

PermaLink | Privacy | Terms of Use
Last Updated: 26 Jun 2008
Editor:
Copyright 2008 by santosh poojari
Everything else Copyright © CodeProject, 1999-2008
Web12 | Advertise on the Code Project