ACC2000: Data Access Page Ignores Underlying Table's Input Mask (200535)

RESOLUTION

1. Open the sample database Northwind.mdb.
2. In the Database window, click Pages under Objects, and then click New.
3. In the New Data Access page dialog box, click Page Wizard, click Customers in the Choose the table or query where the object's data comes from box, and then click OK.
4. Select all the fields, and then click Finish.
5. On the Tools menu, point to Macro, and then click Microsoft Script Editor.
6. On the Edit menu, click Find and Replace, type the following in the Find box, and then click Find:

   title=CustomerID
   					

7. Move the mouse pointer near the end of this line. Note that there is HTML syntax similar to:

   title=CustomerID></TEXTAREA>
   					

8. Insert the mask into this portion of the line as follows:

   title=CustomerID mask="LLLLL"></TEXTAREA>
   					

9. Now search for:

   title=PostalCode
   					

   and insert the mask near the end of this line as follows:

   title=PostalCode mask="#####-####"></TEXTAREA>
   					

10. Search for:

    title=Phone
    					

    and insert the mask near end of this line as follows:

    title=Phone mask="###-###-####"></TEXTAREA>
    					

11. Finally, search for:

    title=Fax
    					

    and insert the mask near the end of the line as follows:

    title=Fax mask="###-###-####"></TEXTAREA>
    					

12. On the View menu, point to Other Windows, and then click Script Outline.
13. In the Script Outline window, expand the Client Objects & Events node, expand the document node, and then double-click onkeypress. Note that new script is entered similar to:

    <SCRIPT LANGUAGE=vbscript FOR=document EVENT=onkeypress>
    <!--
    
    -->
    </SCRIPT>
    					

14. Replace this short portion of script with the following lengthy piece of script (if possible, copy and paste to avoid typographical errors):

    <SCRIPT id=clientEventHandlersJS language=javascript>
    <!--
     /* This function checks the user-defined attribute called Mask. Using
        known mask characters, we match the user's input against the mask. If a 
        valid entry is made, we allow it, otherwise we simply ignore it.
    
        Any character not in the mask that is not a defined mask character is
        treated as a literal. If we encounter a literal character in the mask,
        we check to see if the user entered the literal manually. If so, we
        allow it. If not, we add it manually.
    
        To invoke this functionality, we simply need to add a user-defined
        attribute to any input box. For example, to create an input box with a
        9 digit zip code mask, we would enter:
    
          <INPUT ID="InputBox1" mask="#####-####">
    
        The hyphen within the mask is treated as a literal string to be
        included in the input box.
     */ 
    
     function MaskCheck() {
        // Code to check input against mask character.
        var PosCharEntered
        var MaskCharacter
        var CharEntered
    
        if (event.srcElement.value.length > event.srcElement.mask.length-1) {
    		event.returnValue = false
        }
    
    	// Retrieve the character position within the control.
        PosCharEntered = event.srcElement.value.length + 1;
    
    	// Retrieve the same position within the mask.
        MaskCharacter = event.srcElement.mask.charAt(PosCharEntered-1);
    
    	// Verify the value entered in the control.
        CharEntered = event.srcElement.value
    
    	switch(MaskCharacter) {
    		case 'L':
    			// Check character against the mask.
    	        if (((event.keyCode >= 65) && (event.keyCode <= 90)) ||
                       ((event.keyCode >= 97) && (event.keyCode <= 122))){
                           // Only allow for alpha characters as valid entries.
    				event.returnValue = true
    			}
    			else {
    				event.returnValue = false
    		  // Character entered is not allowed; cancel the keypress.
    			}
            break;
    
    		case '#':
    			// Check character against the mask.
    	        if ((event.keyCode >= 48) && (event.keyCode <= 57)) {
                           // Only allow for numeric values as valid entries.
    				event.returnValue = true
    			}
    			else {
    				event.returnValue = false
                      // Character entered is not allowed; cancel the keypress.
    			}
    		break;
    
          default:
    		// When a mask is not applied by the control.
            if (String.fromCharCode(event.keyCode) == MaskCharacter) {
                   // Allow the character if its not a mask character.
                event.returnValue=true
                }
            else {
                 // If a mask character was not entered, add it to the control.
                event.srcElement.value = event.srcElement.value + MaskCharacter
                }
          }
    	}
    
    	function document_onkeypress() {
    		// Call routine for all controls.
    		if (event.srcElement.mask != null) {
    			MaskCheck()
    		}
    	}
      -->
    </SCRIPT>
    
    <SCRIPT event=onkeypress for=document language=javascript>
     <!--
      // Assign the correct event handler.
      document_onkeypress()
     -->
    </SCRIPT>
    
    <SCRIPT event=onblur for=CustomerID language=javascript>
     <!--
      var intLength
      var strID
    
      intLength = CustomerID.mask.length
    
      if (CustomerID.value.length <= intLength - 1) {
    	alert("The Customer ID must be " + intLength + " characters.");
    	event.returnValue = false;
    	CustomerID.focus();
    	}
      else {
    	strID = CustomerID.value
    	CustomerID.value = strID.toUpperCase();
      }
     -->
    </SCRIPT>
    
    <SCRIPT event=onblur for=Fax language=javascript>
     <!--
      if (Fax.value.length <= Fax.mask.length - 1) {
    	alert("You must enter the complete number with area code.");
    	event.returnValue = false;
    	Fax.focus();
      }
     -->
    </SCRIPT>
    
    <SCRIPT event=onblur for=Phone language=javascript>
     <!--
      if (Phone.value.length <= Phone.mask.length - 1) {
    	alert("You must enter the complete number with area code.");
    	event.returnValue = false;
    	Phone.focus();
      }
     -->
    </SCRIPT>
    
    <SCRIPT event=onbeforeupdate for=PostalCode language=javascript>
     <!--
      if (PostalCode.value.length < 5) {
    	alert("The PostalCode must include the first 5 digits.");
    	event.returnValue = false;
    	PostalCode.focus();
      }
     -->
    </SCRIPT>
    					

15. On the File menu, click Exit, and then click Yes to save the changes if you are prompted.
16. In Microsoft Access, click Page View on the View menu.
17. For the first record, enter alf in the CustomerID box, and press TAB to move to the next box. Note the message. Also note that you are not allowed to enter any numeric values.
18. Enter the full CustomerID of alfki, and then press TAB again. Note that the characters are all set to uppercase.
19. Experiment with the PostalCode, Phone, and Fax controls, and note the number and type of characters that you are allowed to enter into each control.