Client-side Validation with Javascript
by Steve AdcockWebsiteGravy.com
Thursday, 3rd November 2005
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:
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:
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:
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:<!-- // 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.
Options:
Printer Friendly
Email Friend
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.
