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.
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!
ReplyDeletePlease mail it to my id [email protected]
Olá, um ótimo tuturial. Mas não podemos nos esquecer da validação Server-Side que é sem dúvida de maior importância.
ReplyDeleteGood Script... But i didnt find onblur validation
ReplyDeleteGood work. A small issue i found out though.
ReplyDeleteThe gender field validation is performed again even if we select a gender.
request querystring else form.request
ReplyDeleteIts 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.
ReplyDeletegood solution
ReplyDeletei like it.
ReplyDeleteI think jQuery Validate is more simple.... just include plugin and call it anywhere using class="required" ;)
ReplyDeleteGood achievement.
ReplyDeletewooow amazing
ReplyDelete