Client-side Validation with Javascript
by Steve AdcockWebsiteGravy.com
Putting it all together
Alright, I've broken the code down into sections, so let's bring this code together into one HTML document. Here's what a simple form would look like with three text boxes.
<html>
<head>
<SCRIPT LANGUAGE="javascript">
<!--
function focus()
{
document.forms[0].FirstName.focus();
}
function checkme() //check for required fields
{
if (document.forms[0].FirstName.value == "")
{alert("You did not enter your first name. Please provide it.");
document.forms[0].FirstName.focus();return(false)
}
if (document.forms[0].MiddleName.value == "")
{alert("You did not enter your middle name. Please provide it.");
document.forms[0].MiddleName.focus();return(false)
}
if (document.forms[0].LastName.value == "")
{alert("You did not enter your last name. Please provide it.");
document.forms[0].LastName.focus();return(false)
}
}
//-->
</SCRIPT>
</head>
<body onLoad="focus()">
<form action=test.php method=post onSubmit="return checkme()" name=Feedback>
First name: <input type="text" name="FirstName"><br>
Middle name: <input type="text" name="MiddleName"><br>
Last name: <input type="text" name="LastName"><br>
<input type="Submit">
</form>
</body>
</html>
<head>
<SCRIPT LANGUAGE="javascript">
<!--
function focus()
{
document.forms[0].FirstName.focus();
}
function checkme() //check for required fields
{
if (document.forms[0].FirstName.value == "")
{alert("You did not enter your first name. Please provide it.");
document.forms[0].FirstName.focus();return(false)
}
if (document.forms[0].MiddleName.value == "")
{alert("You did not enter your middle name. Please provide it.");
document.forms[0].MiddleName.focus();return(false)
}
if (document.forms[0].LastName.value == "")
{alert("You did not enter your last name. Please provide it.");
document.forms[0].LastName.focus();return(false)
}
}
//-->
</SCRIPT>
</head>
<body onLoad="focus()">
<form action=test.php method=post onSubmit="return checkme()" name=Feedback>
First name: <input type="text" name="FirstName"><br>
Middle name: <input type="text" name="MiddleName"><br>
Last name: <input type="text" name="LastName"><br>
<input type="Submit">
</form>
</body>
</html>
Enjoy.
Options:
Printer Friendly
Email Friend
About The Author:
Steve have been the main guy behind WebSiteGravy.com since its induction more than 5 years ago. Steve is a recent college graduate and works as a systems engineer. He has over 9 years of Internet experience, including web design, web site maintenance and planning and web site programming, promotion and graphics creation.
Steve have been the main guy behind WebSiteGravy.com since its induction more than 5 years ago. Steve is a recent college graduate and works as a systems engineer. He has over 9 years of Internet experience, including web design, web site maintenance and planning and web site programming, promotion and graphics creation.
