How-to control user input based on RegEx pattern

ADF Faces provides Regular Expression validation component that allow developers to test user input for a specific input pattern like numbers or characters only, value ranges and more. Validation however work after the fact, which means the user already provided a wrong entry. To prevent wrong user entry to an input field, JavaScript can be used to ignore the key press when it doesn't fit a specific pattern.

 <af:inputText label="RegEx Sample - Values between 1 - 50" id="it2">
     <af:clientListener method="applyRegExPatternFilter('^[1-9]{1}$|^[1-4]{1}[0-9]{1}$|^50$')"
                                 type="keyDown"/>
</af:inputText>

The Regular expression in the sample code above allows values between 1 and 50 to be entered in a text input field. Any value lower or bigger than this is suppressed and the keyboard entry is not accepted. The JavaScript function for this is shown below:

// JavaScript filter that suppresses user input if the
// defined regular expression pattern is not met. Use this
// pattern if you want to enforce specific user input patterns.

function applyRegExPatternFilter(pattern){
  return function(evt){
       var inputField  = evt.getCurrentTarget();
       var keyCode     = evt.getKeyCode();
       var oldValue    = inputField.getSubmittedValue();
       //allowed keys to navigate, delete and tab out
       var controlKeys = new Array(AdfKeyStroke.ARROWRIGHT_KEY,
                                   AdfKeyStroke.ARROWLEFT_KEY,
                                   AdfKeyStroke.BACKSPACE_KEY,
                                   AdfKeyStroke.DELETE_KEY,    
                                   AdfKeyStroke.END_KEY,
                                   AdfKeyStroke.ESC_KEY,
                                   AdfKeyStroke.TAB_KEY);
       var isControlKey = false;
       //check if the pressed key is a control key
       for (var i=0; i < controlKeys.length; ++i){
          if (controlKeys[i] == keyCode) {
               isControlKey = true;
               break;
          }
       }      

       if (isControlKey == false)

      {
        var regExp = new RegExp(pattern,"i");
        var hasMatch = false;
        var keyChar =
          AdfKeyStroke.getKeyStroke(keyCode).toMarshalledString();
        hasMatch = regExp.test(oldValue.concat(keyChar));
        if(!hasMatch)
           inputField.setValue(oldValue);
           evt.cancel();
      } 
    }    
  }
}

You add the JavaScript to a page by either adding it to the body area of an af:resource tag, or referencing it in an external JS file from the source property of the af:resource tag.

The JavaScript function uses a callback to allow developers to pass additional arguments into it. Using a JavaScript callback like this allows writing generic code that can easily go into external JavaScript files.  To change the JavaScript sample to only allow numeric entries, use the following configuration

<af:inputText label="RegEx Sample - Values between 1 - 50" id="it2">
     <af:clientListener method="applyRegExPatternFilter('^[0-9]*$')"
                                 type="keyDown"/>
</af:inputText>

Using the same JavaScript function with the ^[0-9]*$ expression blocks all user entry of characters.

Note: The Regular Expression used with this JavaScript function must return true for all user entry until the user attempts to add a wrong character. E.g. a RegEx expression to verify mail addresses will not work with this code as it requires a complete mail address to be provided to work.

Note: Using JavaScript like this with af:inputDate doesn't work. The getSubmittedValue does not return a date object but a string, which fails when setting it as a value on the inputDate field.

Comments:

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

A blog on Oracle JDeveloper, ADF, MAF, MCS and other mobile and web topics inspired by questions and answers posted on the OTN forums.



Frank Nimphius

Search

Archives
« May 2015
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
31
      
Today