|
|
|
|
|
| TOP WEB SITE HOSTING SERVICE |
| Web Hosting |
Price |
Disk Space |
Bandwidth |
Domain |
Score |
Visit Site |
 |
$4.95 |
Unlimited |
Unlimited |
Free |
 |
Visit Site
review |
|
 |
|
|
Web Hosting Articles
|
|
|
|
Client-side text field validation with Javascript
I will admit that I am not a huge fan of client-side scripting (for the exception of HTML, of course) because of its relatively low power and compatibility between browsers. Javascript, however, is as powerful as any client-side language comes, and text field validation is a tremendously desired capability many webmasters want for their forms, and without server-side languages (or at least knowledge of them), Javascript is relied upon very heavily.
Calling the appropriate form
Javascript allows for a couple different calls to document forms, either by the name or by the position of the form within the document relative to other forms, beginning at 0. For example, if an HTML document contains 2 forms, the first form would be called as follows:
document.forms[0]
For those familiar with arrays, this will come fairly clearly to you. Javascript will build the number of forms into an array, called forms. Arrays always begin at 0, so to figure out the actual array value of the form, take the forms position on the page, relative to other forms, and subtract one. The 5th form, for example, would be called like this:
document.forms[4]
If you provide your HTML forms names, the name of the form can also be used and will be easier for many webmasters. Simply replace the position of forms[x] with the form name. For example, if a form's name was 'feedback', calling that specific form within the document would be written like this:
document.feedback
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">
<!-- // 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
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.
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>
Enjoy.
Articles from WebSiteGravy.com
|
|
|
|
|
|
|
|
|
|
|
|
|
