X

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.

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

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.