Introduction to CGIs | Still Plugging Away

Hands on exercise

This exercise is primarily focused on using some entry data validation. We have supplied two files to help you do this: "validationRoutines.js" and "checkValsModel.txt".

First, get familiar with the three functions included in "validationRoutines.js":
1. The function "isValidName" is passed the value of a string that is supposed to hold a person's name
2. The function "isValidText" is passed the value of a general text string
3. Both of the above functions check that the tested field only contains allowed characters and return 'false' if they find dis-allowed characters
4. You might want to create variations of these functions for specific types of text strings you have in forms for your pages (you should probably keep a copy of the original versions)
5. The function "stringErrMsg" is passed a short description of the control in error and the string of allowed characters for that field and issues an 'alert' to the user
6. Feel free to create variations of this file and its routines as needed
Next, here's how to use "checkValsModel.txt" in any page that has a 'form' element:
1. The goal is to build a version of "checkVals()" containing tests that apply to each specific form
2. So, in the page, add a <script> start tag, followed by a </script> end tag
3. Then copy the first two lines from "checkValsModel.txt" into the page, right after the <script> start tag
4. Then copy the last two lines from "checkValsModel.txt" into your page, right before the <script> end tag
5. There are two model test sections, one invokes "isValidName()" and the other invokes "isValidText()"; build your own checkVals() function for your form using these two model functions
6. For each personal name input field in the form, issue the "if" statement that checks on "isValidName":
  - change the two occurrences of "**id" to be the id of the field you are testing
  - if necessary, change the list of characters assigned to "allowed" in the first line (Note: if you do this, you will need to change the code in isValidName() in the validationRoutines.js script)
  - change the string "++field_being_tested" to have a short text identifying which field this is for
7. For each general text input field in the form, issue the "if" statement that checks on "isValidText":
  - change the two occurrences of "**id" to be the id of the field you are testing
  - if necessary, change the list of characters assigned to "allowed" in the first line (Note: if you do this, you will need to change the code in isValidText() in the validationRoutines.js script)
  - change the string "++field_being_tested" to have a short text identifying which field this is for
The rest of this lab will demonstrate using these files for the Suggestion Box page and the Tripsite page.

Open "SuggestionBox.shtml" and make the following changes, as described above:
1. After the title element, add a script element with src=validationRoutines.js
2. Then add another script element with the content inline, drawn from "checkValsModel.txt":
  - copy the first two lines (the function declaration and openning brace)
  - copy the test for 'isValidName' and
    - replace '**id' with 'name' (both occurrences)
    - replace '++field_being_tested' with 'the name field'
  - copy the test for 'isValidText' and
    - replace '**id' with 'suggestion' (both occurrences)
    - replace '++field_being_tested' with 'the suggestion field'
  - copy in the last two lines from "checkValsModel.txt" to the end of the script

Modify the provided "suggest.shtml" file by including onsubmit="return checkVals();" in the form element start tag

Save and upload "SuggestionBox.shtml" and "suggest.shtml"
Test that bad data does not get through when entered in the name or suggestion fields (the cgi won't work, of course)

Open "signUp.shtml" and make the following changes, as described above:
1. After the title element, add a script element with src=validationRoutines.js
2. Then add another script element with the content inline, drawn from "checkValsModel.txt":
  - copy the first two lines (the function declaration and openning brace)
  - copy the test for 'isValidName' and
    - replace '**id' with 'firstname' (both occurrences)
    - replace '++field_being_tested' with 'the firstname field'
  - copy the test for 'isValidName' and
    - replace '**id' with 'familyname' (both occurrences)
    - replace '++field_being_tested' with 'the familyname field'
  - copy the test for 'isValidText' and
    - replace '**id' with 'ref' (both occurrences)
    - replace '++field_being_tested' with 'the reference field'
  - copy the test for 'isValidText' and
    - replace '**id' with 'addr1' (both occurrences)
    - replace '++field_being_tested' with 'the addr1 field'
  - copy the test for 'isValidText' and
    - replace '**id' with 'addr2' (both occurrences)
    - replace '++field_being_tested' with 'the addr2 field'
  - copy the test for 'isValidText' and
    - replace '**id' with 'city' (both occurrences)
    - replace '++field_being_tested' with 'the city field'
  - copy the test for 'isValidText' and
    - replace '**id' with 'country' (both occurrences)
    - replace '++field_being_tested' with 'the country field'
  - copy the test for 'isValidText' and
    - replace '**id' with 'ties' (both occurrences)
    - replace '++field_being_tested' with 'the connections to Wales field'
  - copy the test for 'isValidText' and
    - replace '**id' with 'hope' (both occurrences)
    - replace '++field_being_tested' with 'the your-hopes-for-this-trip field'
  - copy the test for 'isValidText' and
    - replace '**id' with 'comment' (both occurrences)
    - replace '++field_being_tested' with 'the comment field'
  - Add a test for 'gender' - if its value is 'm', change it to 'M'
  - Add a test for 'gender' - if its value is 'f', change it to 'F'
  - Add a test for 'gender' - if its value is neither 'M' nor 'F' nor empty,
    - Issue an alert: 'If gender is specified, it must be M or F'
    - Select the gender field (e.g.: document.getElementById('gender').select(); )
    - return false
  - copy in the last two lines from "checkValsModel.txt" to the end of the script

Modify the provided "signUpForm.shtml" file by including onsubmit="return checkVals();" in the form element start tag

Save and upload "signUp.shtml" and "signUpForm.shtml"
Test that bad data does not get through when entered in the name or suggestion fields (the cgi won't work, of course)

Supplemental materials

A cumulative summary of the contents of this course so far: Click here
For a combined cumulative summary of both Web courses so far, Click here

Lesson 5: Introduction to CGI programming