Client Side Validation

EzTiger — Thu, 02 Sep 2004 10:43:00 GMT

Client-Side JavaScript Form Validation

This blog will illustrate exactly how to use client side JavaScript to validate user input in a completely reusable form, by including a JavaScript source file in every web page that needs it validation. The JavaScript will be written in such a way that it doesn’t need to know in advance the actual content of the form. This will allow you to write the routine once and include it in whichever form requires validation. To do this simply create a new text file, write your JavaScript and save it with a .js extension. This newly created file can then be included in whichever page requires the form validation routine.

Let’s have a look at the JavaScript required to validate any web form. This first function simply returns true if the given string contains only white space characters or false if not.

function isWhiteSpace(sString){

for(var i = 0; i < sString.length; i++){

var sChar = sString.charAt(i);

if((sChar != ‘ ‘) && (sChar != ‘\n’) && (sChar != ‘\t’)) return false;

}

return true;

}

This is the main function that is used to perform the validation. This function is called by the onSubmit() event handler.

function verify(oForm){

var sMessage;

var emptyFields = '';

var sErrors = '';

for(var i = 0; i < oForm.length; i++){

var oElement = oForm.elements[i];

if (((oElement.type == "text") || (oElement.type == "textarea")) && !oElement.optional){

if((oElement.value == null) || (oElement.value == '') || isWhiteSpace(oElement.value)){

emptyFields += "\n\t" + oElement.name;

continue;

}

if(oElement.numeric || (oElement.minimum != null) || (oElement.maximum != null)){

var iValue = parseFloat(oElement.value);

if (isNaN(iValue) ||

((oElement.minimum != null) && (iValue < oElement.minimum)) ||

((oElement.maximum != null) && (iValue > oElement.maximum))){

sErrors += " The field " + oElement.name + " must be a number";

if (oElement.minimum != null)

sErrors += " that is greater than " + oElement.minimum;

if (oElement.maximum != null && oElement.minimum != null)

sErrors += " and less than " + oElement.maximum;

else if (oElement.maximum != null)

sErrors += " that is less than " + oElement.maximum;

sErrors += ".\n";

}

else if(oElement.type == "checkbox" && !oElement.optional){

if (!oElement.checked){

emptyFields += "\n\t" + oElement.name;

continue;

}

else if(oElement.type == "select-one" && !oElement.optional){

if (oElement.options[oElement.selectedIndex].value == "0" ||

oElement.options[oElement.selectedIndex].value == ''){

emptyFields += "\n\t" + oElement.name;

continue;

}

else if(oElement.type == "select-multiple" && !oElement.optional){

var iSelected = 0;

for(var i = 0; i < oElement.options.length; i++){

if(oElement.options[i].selected){

iSelected ++;

continue;

}

if (iSelected == 0){

emptyFields += "\n\t" + oElement.name;

continue;

}

if(!emptyFields && !sErrors) return true;

sMessage = "The form was not submitted because of the following error/s.\n";

sMessage += "You will need to correct this and submit the form again!\n\n";

if(emptyFields){

sMessage += "The following fields are required:" + emptyFields + "\n";

if(sErrors)sMessage += "\n";

}

sMessage += sErrors;

alert(sMessage);

return false;

}

The first part of this function loops through all the elements in the forms elements collection, looking for all the text, textareas, checkboxes and select elements. Whilst checking the type of the element we are also checking to see whether the element has an ‘optional’ parameter declared. We then make a list of all the elements that are required but have not had a value entered. Also, if any of these elements have a minimum or maximum property set, then we ensure that they are numbers and within the right range.

Finally, if there are errors, we display the errors in an alert and return false to the calling event handler. Otherwise we return true. Depending upon the return value if this function will determine whether or not, the form is submitted.

Don’t forget that this code is in fact in an included script file, defined within the section of our HTML.

Below is an example of a form that uses our verify function. As you will see verify is called from the onSubmit() event handler for the form, and return whatever value the function returns. It is also, within the onSubmit() event that we also set the properties of the form objects that the verify function needs to verify.

There you have it.

Filtering Custom Collection Performance Test

EzTiger — Wed, 21 Apr 2004 08:51:00 GMT

Sorting and Filtering Custom Collections Performance Test

With respect to a question I was asked on lists@MsWebDev.org.uk in relation to performance impact on filtering large collections of objects.

I therefore created a simple windows application which contained a Label, Textbox, Button and Datagrid. On the Form_Load event I create a For…Next loop counting from 1 to 1000000 and in each iteration of the loop I create a new person object taken from the “Sorting and Filtering Custom Collections” articles and give it a Firstname of Firstname_iLoop.ToString and the same for the Lastname. I then add this person to a persons collection, once the looping has finished, I then set the DataGrids.DataSource property equal to the Persons collection.

The textbox is used to enter a string value for a Filter, for example: Firstname_51276. This is then passed as a parameter to the Persons.FilterByFirstname function. Just before I call FilterByFirstname, I get the DateTime.Now value and store it in a variable, I call FilterByFirstname function and immediately after the call, I record the DateTime.Now. The FilterByFirstname function returns a collection of Person objects that match the Filter criteria, this collection is then given to the DataGrid as it’s new datasource property.

The Label displays the Start date and time, the end date and time and the elapsed date and time between the two. The resulting elapsed time is coming back at approximately: 00:00:01.1214632.

I am running the test on a P4 2.66 GHz, with 512 Mb RAM and Windows XP Professional SP 2.

This is pretty impressive considering, we are filtering through 1 million objects.

You can download the test application from here

Sorting and Filtering Collections

EzTiger — Mon, 19 Apr 2004 06:49:00 GMT

I have further expanded upon my first three articles "Strongly Typed Nested Collections", with a two part article demonstrating how to provide a sorting mechanism for a custom collection class, in both ascending and descending directions. The article also shows how to implement filtering on given properties within a collection.

Part 1 walks you through the creation of all the necessary class files; Person, Persons, Comparer and Enumerations.

Part 2 walks you through the process of creating a user interface that offers this functionality to a user.

The articles can be located on the right hand side of this page under the Article Categories section, entitled: Sorting & Filtering Collections

Strongly Typed Nested Collections

EzTiger — Fri, 02 Apr 2004 13:28:00 GMT

If you are looking for my articles on Strongly Typed Nested Collections, they have now moved to the Articles Category on the right hand side navigation bar.

Sorry for any inconvenience caused.

Tim Price

EzBlog

Client Side Validation

Filtering Custom Collection Performance Test

Sorting and Filtering Collections

Strongly Typed Nested Collections