VirtualMV/JavaScript/Case Study: Forms/Validation Skeleton/Content

Creating a JavaScript Skeleton for Field Validation

Now its time to create the skeleton of the JavaScript file.

While it is tempting to write all the code then de-bug this actually takes heaps longer. It is better to create small portions of code, check that they are working then move on.

A really important part of this process is called versioning, that is taking snapshots of your code at frequent intervals and saving (archiving) them. Probably the simplest way is to work on your project in a Folder, then at regular intervals (especially when you have a working version) zip the folder. I find adding the date in yyyymmdd format at the start of the zip archive keeps them nicely in order.

For example if the folder is myDVDProject I would zip this to a file called 20140424myDVDProject.zip.

Create the skeleton js file

From the previous exercise we added the variables, so now we add the functions.

//Global Variables ----------------------------------------------------------------
var strCompanyName = "Virtual DVD Rentals";
 
function fnDisplayTodaysDate() {
  var currentTime = new Date();
  document.write( currentTime.toLocaleDateString() );
}
 
function fnCheckOK(strName) {
alert("CheckOK"+strName);
}
 
function fnCheckData() {
  alert("Check Data button");
  fnCheckOK(document.myForm.txtFullName); // runs the function fnCheckOk
}
 
function fnAddItem() {
alert("Add Item button");
} 
 
function fnNewReleases() {
alert("New Releases button");
}

Test the html file in a Web Browser to see that it is working:

Test that something is entered

The following code will (This is called pseudo code where you write in semi-english what you want to do)

1. accept a field name (strName)
2. Change the background of the field to white (this resets the colour if it had an error before)
3. Checks to see if nothing has been entered
   • if((strName.value=="")||!isNaN(strName.value))
4. If nothing has been entered
   • change the background colour to yellow
   • set fnCheckOk to false
5. Otherwise
   • set fnCheckOk to true

function fnCheckOK(strName) {
  strName.style.background = "#FFFFFF";
  if((strName.value=="")||!isNaN(strName.value)) {
    strName.style.background = "#FBEC5D";
    return false}
  else {return true}
}

So now we have a function we can use that will check if something has been entered, change the background to yellow if there is a problem and return false, otherwise returns true. So lets put it to the test. Change fnCheckData to ...

  function fnCheckData() {
// Check Name
	fnCheckOK(document.myForm.txtFullName);
}

Test the html file in a Web Browser to see that it is working

Because we wrote the check code as a function we can use the same function to check the Address and Phone. Note that this only works if what you are checking is the same. If you need to check for other things (like restricting the phone to numbers and some special characters like ( and - you will need to write this in another function. While you don't have to put the checking code in a function (such as where the code is only going to be for the phone number) it makes the code much easier to read and debug if you separate it from the main program flow (in function fnCheckData() )

For this example, all I want to do is check if something is entered in Name, Address and Phone so all I need to do is modify fnCheckData () to ..

  function fnCheckData() {
// Check Name, Address & Phone
	fnCheckOK(document.myForm.txtFullName);
	fnCheckOK(document.myForm.txtAdd);
	fnCheckOK(document.myForm.txtPhone);
}

Test the html file in a Web Browser to see that it is working