Get social security numbers right

A common development use case is to guide users when working with input fields that require a specific input format. For example, credit card and social security number fields use character delimiters that you may want to enforce on a field. The following sample uses JavaScript to add a defined delimiter character according to a defined character.

The American social security pattern is defined as xxx-xx-xxxx. Users that type 123456789 should have the input automatically corrected to 123-45-6789 while they type. Also, the field should be protected from character input and input length larger than the provided pattern.

<af:inputText label="Social Security Number" id="it1"
rendered="true">
<af:clientListener
method="handleNumberFormatConversion('xxx-xx-xxxx','-')"
type="keyDown"/>
</af:inputText>

With the above configuration, the handleNumberFormatConversion method is called for each key stroke in the input field. Additional arguments provided to the function are the input pattern and the character delimiter.

The JavaScript code that is addressed by the clientListener on the InputText is shown below:

// JavaScript function that applies a specific format
// to numeric input. The pattern argument defines the
// input mask, e.g. xxx-xx-xxxx. The delimiter defines
// the delimiter character to add to the user input based
// on the pattern

function handleNumberFormatConversion(pattern, delimiter){
return function(evt){
var inputField = evt.getCurrentTarget();
var keyPressed = evt.getKeyCode();
var oldValue = inputField.getSubmittedValue();
//keycode 48-57 are keys 0-9
//keycode 96-105 are numbpad keys 0-9

var validKeys = new Array(48,49,50,51,52,53,54,55,
56,57,96,97,98,99,100,
                                 101,102,103,104,105,
AdfKeyStroke.ARROWRIGHT_KEY,
AdfKeyStroke.ARROWLEFT_KEY,
AdfKeyStroke.BACKSPACE_KEY,
AdfKeyStroke.DELETE_KEY,
AdfKeyStroke.END_KEY,
AdfKeyStroke.ESC_KEY,
AdfKeyStroke.TAB_KEY);

var numberKeys = new Array(48,49,50,51,52,53,54,55,
56,57,96,97,98,99,100,
101,102,103,104,105);

var isValidKey = false;
for (var i=0; i < validKeys.length; ++i){
if (validKeys[i] == keyPressed) {
isValidKey = true;
break;
}
}
if(isValidKey){
//key is valid, ensure formatting is correct
var isNumberKey = false;
for (var n=0; n < numberKeys.length; ++n){
if(numberKeys[n] == keyPressed){
isNumberKey = true;
break;
}
}
if(isNumberKey){
//if the user provided enough data, cancel
//the input
var formatLength = pattern.length;
if(formatLength == oldValue.length){
inputField.setValue(oldValue);
evt.cancel();
}
//more values allowed. Check if delimiter needs to
           //be set
else{
//if the date format has a delimiter as the next
//character, add it
if(pattern.charAt(oldValue.length)== delimiter){
oldValue = oldValue+delimiter;
inputField.setValue(oldValue);
}
}
}
}
else{
//key is not valid, so undo entry
inputField.setValue(oldValue);
evt.cancel();
}
}
}

The sample is for number only input. However, changing it for character or mixed input is not difficult to do. Note however that you can't use this with af:inputDate component because this component doesn't work well when setting String formatted values as the value property. (At least my debugging showed this)

Comments:

Post a Comment:
Comments are closed for this entry.
About

The Oracle JDeveloper forum ranks in the Top 5 of the most active forums on the Oracle Technology Network (OTN).



The OTN Harvest blog is a summary of selected topics posted on the OTN Oracle JDeveloper forum.



It is an effort to turn knowledge exchange into an interesting read for developers who enjoy little nuggets of wisdom





Frank Nimphius

Search

Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today