Windows Systems Administrator Jupitermedia US-CT-Darien Post A Job | Post A Resume

WebDaily: Your daily source for Web Technology Tips and Tricks!

---

*****************************************************************
Validating Data in your Forms
*****************************************************************


* This article discusses form validation using JavaScript

Most dynamically driven websites have some sort of data entry interface. Regardless if that interface is on the Internet or on an Intranet, there will be HTML FORMs that are being filled out to supply the data to the database. Before the information is sent to the server, it is wise to do some client-side data validation, to make sure that the data the user entered is the correct data type.

For example, say that you had a form where you wanted a web visitor to enter his or her name and email address. The email is an optional field, but the user must enter their name. You can write JavaScript or VBScript code to make sure that all of the needed fields have been entered, and that the email address is a valid one. In this article, I will briefly step through the process of client-side form validation.

Let's say this is our HTML file:

<FORM NAME="frmTest">

Name: <INPUT TYPE="TEXT" SIZE="20" NAME="txtName">
<BR>
Email: <INPUT TYPE="TEXT" SIZE="30" NAME="txtEmail">
<P>
<INPUT TYPE="SUBMIT">

</FORM>

Now, when the user clicks the SUBMIT button, we want our data validation function to be run. We can have it run by having it run when the FORM's ONSUBMIT event fires. To do this, we just need to alter the first line to:

<FORM NAME="frmTest" ONSUBMIT="return DataValidation();">


The return returns a true or false to the FORM. A true submits the form, a false does not. Now let's look at the code for our DataValidation() function:

<SCRIPT LANGUAGE="JavaScript">
<!--

function DataValidation()
{

if (document.frmTest.txtName.value == "") {

alert("You must enter a value for the name!");
return false;

}

if (!IsValidEmail(document.frmTest.txtEmail.value)) {

alert("You must enter a valid email address!");
return false;

}

return true;

}

// -->
</SCRIPT>

As you can hopefully see, this function will return false if the txtName element is blank or if the Email address is not valid; else the function will return true. To view the code for IsValidEmail(str), or for a number of other JavaScript validation routines (such as IsValidDate, IsValidTime, IsValidZipCode, and a function to force a certain length, please visit http://www.4GuysFromRolla.com/webtech/091998-1.shtml)

Happy Programming!

*********************************************************************
*********************************************************************
To subscribe to WebDaily, point your browser to:
http://www.4GuysFromRolla.com/webtech/webdaily
*********************************************************************
*********************************************************************

Windows Internet Technology | ASP.NET [1.x] [2.0] | ASPMessageboard.com | ASPFAQs.com | Advertise | Feedback | Author an Article