Custom form field (date field) validation-handler - workflow

Question

I'm trying to create my custom validation handler for some custom fields on workflow form. A have two fields: project begin date and project end date.
For those two field i need two types of validation:
project begin date can not be less then today's date
project end date must be equal or grater then project begin date
However i'm still on beginning of creation custom validation-handlers. For start i just tried some simple validation handler for text field with numbers only but this isn't functioning. I did the following:
In my share-config-custom.xml i add
<config>
<forms>
<dependencies>
<js src="/custom-form-validation.js" />
</dependencies>
</forms>
and connect to my field
<field id="mcwm:shortProjectNumber" set="general" mandatory="true">
<constraint-handlers>
<constraint type="MANDATORY" validation-handler="Alfresco.forms.validation.checkNumber" event="keyup" />
</constraint-handlers>
</field>
custom-form-validation.js file is
Alfresco.forms.validation.checkNumber = function checkNumber(field, args, event, form, silent, message) {
var ok = (field.value=="") || field.value.match("^\\d{4}\\/\\d{4}$");
var valid = ok != null && ok;
if (!valid) {
YAHOO.util.Dom.setStyle(field.id, "border", "2px solid red");
}
else {
YAHOO.util.Dom.setStyle(field.id, "border", "");
}
// Inform the user if invalid
if (!valid && !silent && form)
{
var msg = "The number must match the pattern 1234/5678.";
form.addError(form.getFieldLabel(field.id) + " " + msg, field);
}
return valid;
};
I put custom-form-validation.js file in my opt\tomcat\shared\classes\alfresco\web-extension folder, but there is no field validation at all? Any suggestion on this?
Regards,
Aleksadnar

Answer 1

Field validation in Share is implemented as client-side JavaScript. So your JavaScript file goes in the root of your web app (preferably a directory structure below that), not under WEB-INF. For example, you might want to put it under $TOMCAT_HOME/webapps/share/extension/js. You may have to adjust your dependencies reference accordingly.
Next, don't put custom code in Alfresco's namespace. Create your own. You can create your own namespace by placing something like this in the beginning of your JavaScript file:
if (typeof SomeCo == "undefined" || !SomeCo)
{
var SomeCo = {};
}
You may also want to minify your JavaScript. Then, turn on Share debug. You do that by placing the following in share-config-custom.xml (which lives under $TOMCAT_HOME/webapps/share/WEB-INF/classes/alfresco/web-extension):
<alfresco-config>
<!-- Put Share Client in debug mode -->
<config replace="true">
<flags>
<client-debug>false</client-debug>
<client-debug-autologging>false</client-debug-autologging>
</flags>
</config>
</alfresco-config>
With that in place you can use your browser's developer console to step through the client side JavaScript and figure out why your validator isn't working.

Answer 2

You can use an alternative way to implement the form field validation handler, using javascript directly. I mean, you can add a listener to control when the form is submitted, and add a condition to cancel the submition. So, you could use a code like this when the form is loaded:
//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);
If you want more details about this solution, you can visit this post