Advanced Form Validation and Displaying Error Message – No Alert Dialogue Box

by Hiroshi on June 15, 2008

in Form, Form Validation

I have a feeling that every bit of any twitchy and creepy thing with web page can be done with a nice JS file. Got a form? Does it validate? Does it smack your face with a boring alert box saying! “Hey! Yo! You did not enter your name? Did you think I was stupid and did not know even that you were not entering data?“;

Hmm! Nice… Time for a bit of a change buddy. Look carefully down at following images and compare.

Old Validation

Advanced Validation

If you find 2nd one more creepy then read along. Again you need a smart JavaScript file to do the task for you.

Javascript Code

function isValidEmail(str) {
return (str.indexOf(".") > 2) && (str.indexOf("@") > 0);
}
function CheckData()
{
if (document.getElementById('abc').style.display == "block")
document.getElementById('abc').style.display = "none";
with(document.mailform)
{
name.value = trim(name.value);
phone.value = trim(phone.value);
if(name.value == "")
{
document.getElementById('abc').style.display = "block";
document.getElementById('one').innerText = "Please Enter Your First Name";
name.focus();
return false;
}
}
return true;
}
function trim(sValue)
{
	if (sValue == null)
		return null;
	for (var i = 0; sValue.charAt(i) == " "; i ++);
	sValue = sValue.substring(i,sValue.length);
	if (sValue == null)
		return null;
	for(var i = (sValue.length-1); sValue.charAt(i) == " "; i --);
	return sValue.substring(0, (i + 1));
}

Use this javascript in head section of web page with starting and ending script tags or call it by external js file. It will remove unwanted spaces from entered text and will surprise you if you do not enter any text.

For external js file create a file named as validate.js and call it in head section of web page like this.

<script type="text/javascript" src="validate.js"></script>

HTML Code

And a div you need in the web page containing form, to display the hidden surprise; I mean Error Message.

<div id="abc" style="display:none; color:#FF0000;">

Thats it. Doesn’t matter if you did not understand a word of this js mystry.
Just download the file and use it, see it for yourself. Stare down a bit at the code and hopefully you will understand somehow. Well…I did.

Validate And Show Message Magic Download

Related Posts

Previous post:

Next post: