To customize display of error messages, you shall define a javascript object implementing 3 methods:

• start, called when checking process starts.
• addError, called when an error is found. it receives a jFormsControl argument, which contains infos about the erroneous control, and an error code. the latter equals 1 if user has not edited a required control, 2 if its content is invalid.
• end, called when checking process ends.

You're obviously free to do whatever you need/want in those methods. As for example, you could add the error messages to an error lists ( <ul> located in your html page):

function MyErrorDecorator(){
}

MyErrorDecorator.prototype = {
    start : function(){
    },
    addError : function(control, messageType){
        var message='';
        if(messageType == 1){
            message = control.errRequired;
        }else if(messageType == 2){
            message = control.errInvalid;
        }else{
            message = "Error on '"+control.label+"' field";
        }
        var item = document.createElement("li");
        item.appendChild(document.createTextNode(message));
        document.getElementById("errors").appendChild(item);
    },
    end : function(){
    }
}

Then, declare your MyErrorDecorator object in the options parameters of form or formfull:

  {form $form, 'mymodule~default:save', array(), 'html', array("errorDecorator"=>"MyErrorDecorator")}
   ...
  {/form}

Details about jFormsControl object passed to addError (named control above), and its properties:

• name : control or field name
• label : its label
• datatype : its data type (type attribute in your XML file)
• required : boolean, true if required
• readonly : boolean, true if readonly
• errInvalid : invalid error message defined in your XML file
• errRequired : required error message defined in your XML file
• help : help message defined in your XML file

In previous versions, Help messages were displayed by a javascript object in the same manner of errors, but it is not the case in jelix 1.2 and above. Help messages are displayed in a CSS help balloon when the mouse is hover the help image.

If you want to customize them, you need to provide your own CSS.

The generated Javascript code for the form is mainly based on the use of a JS object jFormsJQ, from which you can access to other JS objects corresponding to fields.

The first object you can retrieve, is the object corresponding to the form itself. You should then call jFormsJQ.getForm() with the form id.

var f = jFormsJQ.getForm("jforms_users_identity");

Then you can access to some functions

  f.setErrorDecorator(new MyErrorDecorator); // see above
  f.addSubmitHandler(function(event){...}); // see below

  var c = f.getControl("ctrlref"); // retrieve of the js object of a control

The js object of a control has some properties:

    c.name; // the "ref" value
    c.label; // its label
    c.required; // indicate if it is required
    c.errInvalid; // message when the content is invalid
    c.errRequired; // message when the content is required
    c.readOnly; // true ou false.

Some objects have additionnal properties depending of their type.

To add additionnal check or to run anything you want during the submit event, you should not to use an event listener, but you should add a "submit handler" on the javascript jforms object. A submit handler is a function, accepting a DOM event as parameter, and returning true if the form can be submitted, else false. You add a submit handler with the function addSubmitHandler on the jforms object.

Here is an example to add a confirmation message:

jQuery(document).ready(function(){
    jFormsJQ.getForm("the_id_of_formelement").addSubmitHandler(function(ev){
         return window.confirm("Do you really want to submit this data?");
       });
});

By default, the handler is executed after the check on data. If you want to add the handler before the check, indicate true as second parameter to addSubmitHandler.

All handlers (and the data check) are executed, even if one handler or the data checker return false. If you want to stop the execution of handlers following your's, just throw an exception.

HTML generator forces jQuery inclusion on every HTML response including a jForm. Thus, if you already link to jQuery script elsewhere in your appplication, such as in your common response, you should take care to include the very same script. Otherwise, your user will download it twice.

Example in a common respsonse :

  $this->addJSLink(jApp::config()->urlengine['jelixWWWPath'].'jquery/jquery.js');