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; }