Sabtu, 31 Januari 2009
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.
<script language="javascript" src="validatepost.js"></script>
Download Script 
Live DemoClear 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.
<script type="text/javascript">
function clear_click(thisfield, defaulttext)
{
if (thisfield.value == defaulttext) {
thisfield.value = "";
}
}
function recall_click(thisfield, defaulttext)
{
if (thisfield.value == "") {
thisfield.value = defaulttext;
}
}
</script>
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>
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" > <span id="msg-1" class="msg" style="visibility:hidden;" >Enter Valide Email. </span>
Download Script Live DemoRelated Posts
Delete a Record with animation fade-out effect using jQuery and Ajax.
jQuery Username Live validation.
Rating: 4.5
Reviewer: Unknown
ItemReviewed: Some Javascript Tips - Form Validation, Toggle Messages
