ACC2002: Data Access Page Ignores Underlying Table's Input Mask (299009)

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, point to Find and Replace, click Find, type the following in the Find what box, and click Find Next:

   class=MsoTextbox id=CustomerID
   					

7. Move the mouse pointer near the end of this line, which reads as follows:

   MsoTextAlign="General"></TEXTAREA><SPAN
   					

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

   MsoTextAlign="General" mask="LLLLL"></TEXTAREA><SPAN
   					

9. Search for

   class=MsoTextbox id=PostalCode
   						

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

   MsoTextAlign="General" mask="#####-####"></TEXTAREA><SPAN
   					

10. Search for

    class=MsoTextbox id=Phone
    						

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

    MsoTextAlign="General" mask="###-###-####"></TEXTAREA><SPAN
    					

11. Search for

    class=MsoTextbox id=Fax
    						

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

    MsoTextAlign="General" mask="###-###-####"></TEXTAREA><SPAN
    					

12. In the Objects drop-down list, click document.
13. In the Events drop-down list node, 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. If you are prompted to save the changes, click Yes, and then save the page with the default name that appears.
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.