Client-side Validation with Javascript
By Steve Adcock2005-05-14
Amazing Javascript error checking
|
|
Each form element belongs, or lives, within one single form, so when error checking multiple forms on one single page, no discrepancies will surface. When checking a particular form field, we call it by the name and check its value. So, let's say we have the following form item in our first document form:
<input type="text" Name="FirstName">We don't have to define a value within the HTML coding because we rely on your web site viewer to do that. To make sure that when the form is submitted, the form item is checked before processing, we'll use javascript's onSubmit function within the form tag, like so:
<form action="test.php" method="post" onSubmit="return checkme()">All tags rest in the <head> and </head> portion of our HTML document. In addition, a Javascript function is used and named whatever you like, to error check the text box, which may be a new concept to many fairly light Javascript programmers. A function is simply a set, or chunk, of code used with or without variables to perform a particular function. Here's what I've used to check the text box named FirstName. The elements in green signify Javascript comments and will not be displayed when the page is loaded.
<SCRIPT LANGUAGE="javascript">Beyond the focus() function, we first use an if statement to check whether the input element FirstName is blank. If it is, an error will be displayed in the form of a popup window and the form will not be processed. You can simply copy and paste for any form element in your form, changing the field name, of course.
<!-- // Hide the following code from non-Javascript enabled browsers
// The following sets the cursor automatically in the FirstName text box field
function focus() // Define function focus
{
// Sets cursor to FirstName input element
document.forms[0].FirstName.focus();
}
function checkme() // Define function checkme
{
if (document.forms[0].FirstName.value == "")
{
alert("You did not enter your first name. Please provide it.");
document.forms[0].FirstName.focus();return(false)
}
}
//-->
</SCRIPT> // End the Javascript script
Tutorial Pages:
» Client-side text field validation with Javascript
» Calling the appropriate form
» Amazing Javascript error checking
» Putting it all together
|
