Client Validator

Client validators are used in web forms to check and validate user entry in specific fields which either must respect some rules or have a format or must be converted before sending data to the server. It is mostly used to check fields  like Email , credit card, password, phone number, etc...

How it works

A Client Validator is an attribute of the TextEntry component. The validator is a piece of JavaScript code that is called when a component lose its focus or when it changes its value. The validator is also called when a form is submitted on the server side during the generate response steps of  JSF cycle.
A validator consists of four different parts :

  • Filter: validate each character with a regular expression.
  • Translator: Format each character  i.e: upper case, see if separator is accepted or replace it.  
  • Checker: Check validity of data. For exemple checking syntax of an Email.
  • Formatter: Apply specifc pattern of the field i.e : format a date according to the current locale. 

For these four parts are implemented as a javascript function called on the client side and a java class on the server side when the form is submitted by the browser. The browser side generate the formatted field value in the "Render" phase of the JSF lifecycle.

Presently several Client Validator are available, it is possible to change their behaviors and their parameters. Moreover it is easy to create new validators using some part of existing validators or new validator parts. 

We advise you to look at the rcfaces-config.xml file contained in rcfaces-html.jar to see all existing client validators. Extract of rcfaces-config.xml :

<clientValidator id="number">

            <parameter name="num.signed" value="false" />

            <parameter name="num.decimal" value="0" />

            <parameter name="num.negSign" value="-" />

            <parameter name="num.decSign" value=",." />

            <parameter name="num.sepSign" value=" " />

            <filter call="f_vb.Filter_num" class="org.rcfaces.core.internal.validator.impl.NumFilter"/>

            <translator call="f_vb.Translator_num"

                           class="org.rcfaces.core.internal.validator.impl.NumTranslator"/>

            <checker call="f_vb.Checker_num" class="org.rcfaces.core.internal.validator.impl.NumChecker"/>

            <formatter call="f_vb.Formatter_num" class="org.rcfaces.core.internal.validator.impl.NumFormatter" />

            <converter object="f_vb.Converter_num" />  

            <!--

                  <onerror call="f_clientValidator.Error_null" />

                  <oncheckerror call="f_clientValidator.Error_focus" />

                  -->

</clientValidator>    

 

Creating your own validator

Just for fun, the aim of this exercise will be to create a client validator which does a Caesar cipher.
When the user enters a character, the validator filters the letters of alphabet, then change to upper case and finally calls the formatter to do cipher algorithm.  

First In the base source directory of your project (src),  create a META-INF folder and a  rcfaces-config.xml file in this folder. Paste the following text :  

<?xml version="1.0" encoding="UTF-8"?>

<rcfaces-config>


      <repositories>

            <repository>

                  <type>javascript</type>

                  <location>org/rcfaces/rcfacesformsample/js/repository.xml</location>

            </repository>

      </repositories>

 

      <clientValidators>

            <render-kit>

                  <!--

                        /** * Validaor CAESAR * * Caesar cipher*/

                  -->

                  <clientValidator id="CAESAR">

                        <parameter name="nb.shift" value="5" />

                              <!-- if is letter -->

                        <filter call="f_vb.Filter_alpha"

                             class="org.rcfaces.core.internal.validator.impl.AlphaFilter" />

                        <!-- To upper case -->

                        <translator call="f_vb.Translator_uppercase"

                              class="org.rcfaces.core.internal.validator.impl.UpperCaseTranslator" />

                        <!-- Caesar cipher  -->

                        <formatter call="av_caesar.DoIt" />

                  </clientValidator>

            </render-kit>

      </clientValidators>

 

</rcfaces-config>


The parameter named "nb.shift" allows to change the shift of the cypher. The filter phase of this validator calls a javascript function named Filter_alpha and its  java class which do the same.
Tanslator calls a RC Faces javascript function named Filter_alpha and its  java class which do the same formatting.

Then formatter calls a new function wich must added in the repository.xml file :

<?xml version="1.0" encoding="UTF-8"?>

<repository id="javascript" baseDirectory="org/rcfaces/rcfacesformsample/js" convertSymbols="true">

     

      <module id="clientValidator">

            <file name="av_caesar.js">

                  <class name="av_caesar">

                  </class>

            </file>

      </module>

     

</repository>


The av_caesar.js file : 

/**

 * class av_caesar.

 *

 * @class av_caesar

 * @author JBM

 *

 */

 

var __statics = {

 

      /**

       * @method public static

       * @context object:validator

       */

      DoIt : function(validator, inVal) {

 

            if (!inVal) {

                  validator.f_setObject(null);

                  return inVal;

            }

 

            k = validator.f_getIntParameter("nb.shift");

            Alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZ';

            var clair = inVal;

            while (k < 0) {

                  k += 26

            };

            while (k > 25) {

                  k -= 26

            };

            n = 0;

            chiffre = "";

            for ( var count = 0; count < clair.length; count++) {

                  var alpha = clair.charAt(count);

                  idx = Alphabet.indexOf(alpha);

                  if (idx > -1) {

                        if ((n % 5 == 0) && (n > 0)) {

                             chiffre += " ";

                        };

                        n++;

                        chiffre += Alphabet.charAt(idx + k);

                  }

            }

            return chiffre;

      }

 

}

 

new f_class("av_caesar", {

      statics : __statics

});


Finally, we create a jsp file that use the new custom validator  :


<vh:javaScript requiredModules="clientValidator" />


<v:textEntry id="field clientValidator="CAESAR">


When the user type within the text field, only alpha characters are authorized. They are automatically changed to upper case as the user is typing.  When the field loses focus, the Caesar cipher is called.