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

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