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 MyHelpDecorator object as fourth argument of form or formfull:

  {form $form, 'mymodule~default:save', array(), "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

As for error messages, your javascript object displaying help messages is equivalent except that only one method is required: show. show will be called with an help message to be displayed as argument.

function MyHelpDecorator(){ }

MyHelpDecorator.prototype = {
    show : function(message){
        document.getElementById("help").firstChild = document.createTextNode(message);
    }
}

Then, declare your MyHelpDecorator object as fifth argument of form or formfull:

  {form $form, 'mymodule~default:save', array(), "", "MyHelpDecorator"}
   ...
  {/form}

Note that here "" is passed as error decorator. This way, jForms will use its default errorDecorator. Of course, if you have your own, you'd better pass it as argument also.

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($GLOBALS['gJConfig']->urlengine['jelixWWWPath'].'jquery/jquery.js');