RSS

Simplest Way to Display Error Message !

13 Sep

Hey guys I am back with some simple POC on a javascript code to display validation Message next to your Input Text field .

For eg.Displaying a Validation Message “Already Exists!” for a input given by User for some Study.

Here is the Source Code:

***************************************************CODE STARTS***************************************************

if($(STUDY_NAME)){
$(STUDY_NAME).addEvent(‘focus’,function(){

var errorDiv = $(STUDY_NAME).getNext(‘div’);
if(errorDiv){
errorDiv.dispose();
}
});

if(!$(STUDY_NAME).getNext(‘div’)){
new Element(DIV,{
STYLE : ‘color:#FF0000;display: inline;padding-left:10px;’
}).set(‘text’,’Already Exists!’).inject($(STUDY_NAME), ‘after’);
}
}

*************************************************CODE ENDS*********************************************************

Explanation:

For Simplicity I have taken Input Text Id to be STUDY_NAME.

1.The Basic Idea is to generate an Extra div called ‘Error Div’ which would contain our Validation Message ‘Already Exists!’.

2.The Entire Process would hold valid only if we have Text Id defined with some value;Hence the entire code is inside the first “if” condition.

3.Then using the “addEvent” handler routing of javascript we create our error div as soon as we get ‘focus’ on text field.

4.Since the error message needs to be displayed next to our text box which itself has a div therefore we need to use $(STUDY_NAME).getNext(‘div’) inorder to get next div.

5.****This is the most important step.We need to discard the “error div” as soon as the user is notified about the mistake so that he can enter new “Non-Existing Value” which is perfectly fine by system.However,if we fuhget this step then either multiple ‘error div’s ‘ would be generated or the same ‘error div’ would remain even if the user enters new correct value.

6.This step is very simple comprising of Basic HTML and CSS skills.The attribute ‘display :inline” would display error message inline to your text box that is exactly adjacent and at same level.

7.Enjoy your Validation !

 

 
2 Comments

Posted by on September 13, 2011 in Uncategorized

 

2 responses to “Simplest Way to Display Error Message !

  1. Ahmed Abbas

    September 15, 2011 at 9:09 PM

    Advice for your further posts.. Provide exzplanation/comments for the code in the code itself or code too…
    It ll be easy to understand…

     
    • Zohaib H Momin

      September 15, 2011 at 9:21 PM

      Sure Bro .Thanks for that feedback!
      Do Rate this post !
      Thank you

       

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

 
%d bloggers like this: