9lessons programming blog
Loading Search
9lessons Bring Friends
Wall Script
Follow Me:
Saturday, January 31, 2009

Some Javascript Tips - Form Validation, Toggle Messages

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.

Comments
{ 11 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

Cilic said...

Good work. A small issue i found out though.
The gender field validation is performed again even if we select a gender.

http://www.tulliomarra.it said...

request querystring else form.request

Anonymous said...

Its good but just showing the message when the cursor is in the text field.And it is not validating the text field not a good client side validation.

Anonymous said...

good solution

khyati said...

i like it.

umair said...

I think jQuery Validate is more simple.... just include plugin and call it anywhere using class="required" ;)

subrat kumar Sahoo said...

Good achievement.

Anonymous said...

wooow amazing

Post a Comment