 |
 |
Login / Sign Up |
|
Home >> Articles >> Programming and Scripting >> Javascript text field validation
Author: Steve
Added: June 5, 2004
Views: 12,837
Rating: 4/10
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:
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:
All tags rest in the and 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.
// 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.
First name:
Middle name:
Last name:
Enjoy.
More Programming and Scripting Articles
|
|
|
