The blog for hints & tips about Oracle Application Development Framework and Mobile Application Framework

  • ADFv
    November 30, 2010

How-to control user input based on RegEx pattern

Frank Nimphius
Master Principal Product Manager

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.

label="RegEx Sample - Values between 1 - 50" id="it2">




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.


  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



var isControlKey = false;

       //check if the pressed key is a
control key

       for (var i=0; i < controlKeys.length;

          if (controlKeys[i] == keyCode)

               isControlKey = true;




       if (isControlKey == false)


        var regExp = new

        var hasMatch = false;

        var keyChar =

        hasMatch = regExp.test(oldValue.concat(keyChar));








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">




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.

Be the first to comment

Comments ( 0 )
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.