Client-side JavaScript Validation

Whenever a user clicks the "Save" button after editing or adding a new record, you may want to perform data validation before the new record data is submitted. Also, when a user clicks a "Delete" button, it is generally a good idea to display a dialog box asking for confirmation. AspGrid enables you to accomplish both tasks by connecting to client-side JavaScript you supply.

The sample file http://localhost/aspgrid/06_validate/client.asp demonstrates how to take advantage of AspGrid's support for client-side JavaScript. Once again, we will build a grid based on the Employees table from our sample database.

In the server-side portion of the script, we set two previously unseen properties: FormOnSubmit and DeleteButtonOnClick:

Grid.FormOnSubmit = "return Validate();"
Grid.DeleteButtonOnClick = "Are you sure you want to delete this record?"

The first line specifies an OnSubmit attribute for a <FORM> that AspGrid generates whenever a user clicks an "Edit" or "Add New" button. The resultant form tag will look as follows:

<FORM ACTION="..." METHOD="..." NAME="AspGridFormSave1" OnSubmit="return Validate();">

The NAME attribute of this form is pre-set to AspGridFormSave1. The index 1 corresponds to the NumberOnPage property of this grid which is 1 by default. If you had multiple grids on the same page, you would set NumberOnPage for the second grid to 2, and the form name for that other grid would be AspGridFormSave2. This way, name conflicts are avoided among multiple grids on the same page.

The OnSubmit attribute points to a client-side JavaScript routine. If the routine returns true, the form will be submitted. If it returns false, clicking a submit button will have no effect. All we need to do is write a validation routine that would return true or false as appropriate, thereby validating user input.

Let's examine the Validate routine we use in our code sample:

<SCRIPT LANGUAGE="JavaScript"> function Validate() {   // Make sure Name is filled   if( document.AspGridFormSave1.FIELD3.value == "" )   {     alert('Name must be filled.');     document.AspGridFormSave1.FIELD3.focus();     return false;   }   // Make sure Salary is filled   if( document.AspGridFormSave1.FIELD4.value == "" )   {     alert('Salary must be filled.');     document.AspGridFormSave1.FIELD4.focus();     return false;   }   // Make sure Salary is a number   if( isNaN(document.AspGridFormSave1.FIELD4.value ) )   {     alert('Not a number!');     document.AspGridFormSave1.FIELD4.focus();     return false;   }   // Validate date   var testDate=new Date(Date.parse(document.AspGridFormSave1.FIELD5.value ) );   if( !testDate.getYear() )   {     alert('Not a date!');     document.AspGridFormSave1.FIELD5.focus();     return false;   }   return true; } </SCRIPT>

The AspGridFormSave1 form consists of input controls with the following names: FIELD1, FIELD2, FIELD3, etc. The input controls are numbered according to their order in the SQL statement. For example, the "salary" box has the name FIELD4 because it is number 4 in our SQL statement.

To access the value of an item in our form, we use expressions of the type

document.AspGridFormSave1.FIELDxxx.

The following code examines the content of the "name" input box, and if it is empty, displays a warning to the user, sets the input focus to that box and returns false to prevent the form from submitting.

if( document.AspGridFormSave1.FIELD3.value == "" )
{
  alert('Name must be filled.');
  document.AspGridFormSave1.FIELD3.focus();
  return false;
}

The following line uses the built-in JavaScript function isNaN to determine whether the "salary" value is a number:

if( isNaN(document.AspGridFormSave1.FIELD4.value ) )
{
  ...
}

JavaScript does not have a built-in isDate function, so to validate a "hiredate" value, we use a trick: first we convert the specified string to a date object using the Date.parse method, then attempt to query that object. If the getYear method returns a non-zero value, the date object is valid, and therefore user input is validated:

var testDate=new Date(Date.parse(document.AspGridFormSave1.FIELD5.value ) );
if( !testDate.getYear() )
{
  alert('Not a date!');
  document.AspGridFormSave1.FIELD5.focus();
  return false;
}

Let's go back to the DeleteButtonOnClick property. Setting this property to, say, "Are you sure you want to delete this record?" causes your grid to pop up a confirmation dialog box whenever a user clicks the "Delete" button.

If OK is selected, the corresponding form will be submitted and record deleted. Selecting Cancel prevents the form from submitting.

Server-side Validation

Client-side JavaScript validation described above is very efficient since user input is validated before it is submitted. However it may raise browser-incompatibility issues. If you prefer to keep the client 100% script-free, AspGrid still allows you to perform data validation, but it takes place on the server side.

The code sample http://localhost/aspgrid/06_validate/server.asp uses the Department table from our sample database to demonstrate the technique. In this code sample, we verify that: (1) a department name is not empty; and (2) a phone number has exactly 10 digits. If either condition fails, the submission is ignored and an error message displayed. Let's examine the server-side validation portion of this code:

<% Set Grid = Server.CreateObject("Persits.Grid") ... Set all parameters If Request("AspGridSave1.x") <> "" Then   ' Verify department name   If Request("FIELD2") = "" Then     Response.Write "Department name is empty!<P>"     Grid.IgnoreCommands ' do not save!   Else     ' verify phone - must have 10 digits     Phone = Request("FIELD3")     Count = 0     For i = 1 to Len(Phone)       if Mid(Phone, i, 1) >= "0" and Mid(Phone, i, 1) <= "9"_         Then Count = Count + 1     Next     If Count <> 10 Then       Response.Write "A phone must have 10 digits!<P>"       Grid.IgnoreCommands ' do not save!     End If   End If End If ' Display grid Grid.Display %>

The idea behind this code is to intercept the submitted values before they reach the Display method, and if necessary, inhibit the save. The first line checks whether a "Save" submission is in progress:

If Request("AspGridSave1.x") <> "" Then

The next line examines the department name value (FIELD2):

If Request("FIELD2") = "" Then

If it is empty, an appropriate message is displayed, and AspGrid is instructed to ignore the submission altogether by calling

Grid.IgnoreCommands

It is important that data validation and a call to the IgnoreCommands method be performed before a call to the Display method, or it will be too late and the new values, albeit invalid, will be saved to the database.

The rest of the code is self-explanatory: we simply count the number of digits in a Phone value, and if the count is not 10, the value is rejected the same way as before.