Loading Searchbox
9lessons programming blog logo
Saturday, January 31, 2009

Some Javascript Tips - Form Validation, Toggle Messages

3 comments
Are you looking for a simple form validation javascript functions? just take a look at this article.

This is very simple javascript functions that I have developed and used in some of my web projects useful to add client side information.

Form Validation innerHTML
Simple and clean javascript validation innerHTML message like Facebook.
You have to add a link to validatepost.js into your page:

<script language="javascript" src="validatepost.js"></script>

Download Script     Live Demo

Clear Click and Recall Click
This tip when you focus or select a field with the cursor the field value will be clear and if you are not fill any thing again recall the default value name.
The code :
<script type="text/javascript"&gt;
function clear_click(thisfield, defaulttext)

{

   if (thisfield.value == defaulttext) {
   thisfield.value = "";

}
}

function recall_click(thisfield, defaulttext)

{

   if (thisfield.value == "") {
   thisfield.value = defaulttext;

}

}


</script>

HTML Code :
Now we will add a link that call onclick=clear_click() and onblur=recall_click() functions:
<input name="name" id="name" value="Name" onclick="clear_click(this, 'Name')" onblur="recall_click(this,'Name')" type="text">


Toggle Message
When you focus or select a field with the cursor a toggle message appears on the right side of the field with a short information about the field.

<script type="text/javascript">

function toggleMessage(idElement)

{

   element = document.getElementById(idElement);
   if(element.style.visibility!='hidden')
   {
       element.style.visibility='hidden';
    }
   else
   {
      element.style.visibility='visible';
    }

}


</script>

Toggle Message HTML Code.
Here we will add a link that call the toggleMessage() function:

<input onFocus="javascript:toggleMessage('msg-1')" onBlur="javascript:toggleMessage('msg-1')" type="text" name="Email" >
&nbsp;&nbsp;<span id="msg-1" class="msg" style="visibility:hidden;"  >Enter Valide Email. </span>

Download Script     Live Demo

Related Posts
Delete a Record with animation fade-out effect using jQuery and Ajax.
jQuery Username Live validation.

Sponsored Links

Recent Posts

Share this post

Subscribe to my feeds

Subscribe
Comments
3 comments
Girish.k said...

Hey nice tutorials.Thanks for the help you posted here.I actually need a help from you.I am struck @ captcha validation...can you help me out with the code.The problem is when i give the wrong captcha verification,the full page is getting re-loaded!! Help me out if its not a pain in the neck!

Please mail it to my id getgirish.k@in.com

nandodutra said...

Olá, um ótimo tuturial. Mas não podemos nos esquecer da validação Server-Side que é sem dúvida de maior importância.

Anonymous said...

Good Script... But i didnt find onblur validation

Post a Comment

Orkut | FacebookAbout Me

Subscribe now!Feeds RSS

Subscribe now!Recent Posts

Subscribe now!Categories

Subscribe now!Comments

People Says

@9lessons thank you for the great tutorials, we truly appreciate your contributions to the design community.

Smashing Magazine

Join into my community

Labs ProfileRelease

My ProfileTwitter