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>

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>