Cómo implementar la validación de un formulario de otra forma en Alfresco

Vamos a explicar una forma diferente a la estándar para implementar validaciones en los formulario de Alfresco.

Primero, añade un listener para controlar cuando el formulario realiza el submit.

 //Add a listener to control when the form is submited
document.body.addEventListener("submit", function (event) {
     
     //If there are wrong values
     if(wrongValues()){
          //Cancel the event
          event.stopPropagation();
          event.preventDefault();
     }
}, true); 

Con el código anterior puedes cancelar el submit cuando lo necesites. En el ejemplo anterior, en concreto, se cancela cuando el método  «wrongValues()» devuelve true

Para terminar, añade la funcionalidad necesaria para mostrar un mensaje informando al usuario sobre el error.

Así por ejemplo, para añadir un fondo como el de la imagen a un campo

Añade el siguiente código (obviamente, es aconsejable usar CSS en lugar de cambiar el estilo directamente).

//Add a listener to control when the form is submited
document.body.addEventListener("submit",function(event){ 
     //If there are wrong values
     if(wrongProjects.length>0){
          //Cancel the event
          event.stopPropagation();
          event.preventDefault();
          //Draw the background red
          $(ID_FIELD).css("background-color", "#faecee");
     }
}, true);

Ahora nos falta mostrar un tooltip como el siguiente para informar al usuario sobre la incidencia en el campo del formulario

Para mostrar el mensaje cuando se pincha sobre el formulario, añade el siguiente código

 
//When focus: Show a balloon tooltip 
//and set red color if there are wrong values 
$(ID_FIELD).on('focus', function (event) { 
      var tooltip=_getBallonTooltip(); 
      //If the field it's wrong 
      if(wrongValues()){ 
            //Set the message 
            tooltip.html("Error message"); 
            //Show the information 
            tooltip.show(); 
            //Set the background to red 
            $(ID_FIELD).css("background-color","#faecee"); 
      } 
});

Para ocultar el mensaje cuando se pierde el foco sobre el campo, añade el siguiente código:

//When the user is typing, 
//hide a message and set the backgroud white
$(ID_FIELD).on('keypress', function (event) {
       var tooltip=_getBallonTooltip();
       $(ID_FIELD).css("background-color", "white");
       tooltip.hide();
});

y finalmente, nos falta implementar el método que crea o genera el tooltip.

 var _getBallonTooltip=function(){
//If  the var ballonValidate doesn't exist
if(!ballonValidate)
        ballonValidate=Alfresco.util.createBalloon(
            "com-navycoms-installation", {
            width : "30em"
        });
 return ballonValidateInstallation;
 }