Chapter 6. Data Validation
Contents
6.1 Client-side JavaScript Validation
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.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:
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:
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.
{
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:
{
...
}
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:
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.
6.2 Server-side Validation
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:
The next line examines the department name value (FIELD2):
If it is empty, an appropriate message is displayed, and AspGrid is instructed to ignore the submission altogether by calling
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.
