How to implement Form Field Validation Handlers in a different way in Alfresco

We are going to explain an extra way to implement Form Field Validation Handlers in Alfresco.

We know the standard way is this,  however if you are looking for another solution because the first one doesn’t satisfy your expectation, it’s your lucky day!

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

Now, you can cancel the submit when you need it.

Second , show the error message.

We are going to implement a solution similar to Alfresco’s behavior.
To add a red background, like this



Add this line to the previous code (obviously, you can use CSS).


//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);

 and to show a message to inform the issue when the field is focus, add the following lines:

To show the message when the field gains focus.

 
//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"); 
      } 
});

To hide the message when the user leaves the input field

//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();
});

And finally, we have to implement the method to get the tooltip ballon.

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

Leave a Reply

Your email address will not be published. Required fields are marked *