Some Javascript Tips - Form Validation, Toggle Messages
Wall Script
Wall Script
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.
web notification

11 comments:

  1. 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 [email protected]

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

    ReplyDelete
  3. Good Script... But i didnt find onblur validation

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

    ReplyDelete
  5. 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.

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

    ReplyDelete

mailxengine Youtueb channel
Make in India
X