topic Re: Validation of range with numberrange.ftl in Alfresco Archive

Validation of range with numberrange.ftl

mcasanket — Thu, 29 Dec 2011 16:32:38 GMT

Hello Everyone, In one requirement I am using numberrange.ftl file, to search files by size. I have configured my code in share-config.xml and It is showing me the two text boxes for minimum and maximum size. I want to put some client validation like min size should be less than max size, Accepts

Re: Validation of range with numberrange.ftl

jpotts — Thu, 29 Dec 2011 17:29:05 GMT

Look at the Validation Handlers section on this page.

Basically, you're going to write some client-side JavaScript to do your validation and then add that function to the validation handler for that property. I haven't done this in 4, but in 3.4, I used a custom component for my two fields so that I could do things like pass in the name of the first field my second field was dependent on.

You can look at the existing validation handlers in Share to see examples of how this works. I don't know of any cross-field dependencies in Share OOTB, but you can start with the simple numeric validation handler and follow that example for yours.

I'll also ask the Share Extras team if there are any examples closer to what you are looking for in one of their projects and will add a response to this thread with the reference if one exists.

Jeff

Re: Validation of range with numberrange.ftl

flm — Thu, 29 Dec 2011 18:33:30 GMT

I don't really have an example for the dependent fields. The only control with dependencies that I am aware of, is this cascading select control which can be used as an example. It is implemented as a custom control with inline Javascript: http://code.google.com/p/alfresco-forms-service-examples/source/browse/trunk/share/source/web/WEB-INF/classes/alfresco/site-webscripts/org/alfresco/components/form/controls/cascadeselect.ftl

To create a validation handler I can show you an example, though:

Create a new file, e.g. /js/custom-form-validation.js … this one checks for a specific number format. I don't remember why I didn't use the exisiting REGEX validator, but as you can see there is also some custom styling (red border) added here. I suggest using Firebug or Chrome Developer Tools to debug into it and check the contents of all parameters. Maybe you can use the form parameter to access the other form field from your range.


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

Add the dependency to the Javascript file in your share config:

   <config>
      <forms>
         <dependencies>
            <js src="/js/custom-form-validation.js" />
         </dependencies>
      </forms>
   </config> 
‍‍‍‍‍‍‍‍

And then add the validation handler to the field:

   <field id="custom:customNumberField">
      <constraint-handlers>
         <constraint type="MANDATORY" validation-handler="Alfresco.forms.validation.checkNumber" event="keyup" />
      </constraint-handlers>
   </field>
‍‍‍‍‍‍

I have used this on 3.4 and I am not sure it will work for you directly but you can use it as a starting point. I hope it helps.

Florian

Re: Validation of range with numberrange.ftl

darkredd — Tue, 25 Mar 2014 09:22:03 GMT

Hi,

I came across this post looking almost to accomplish a similar task. Mine is to validate that the entered date on a custom workflow is valid (i.e. future date). I have followed the example but I am still lost. Here is what I have so far:


<field id="bpm:workflowDueDate" label-id="workflow.field.dueDate" set="info" mandatory="true">
<control template="/org/alfresco/components/form/controls/date.ftl">
<control-param name="showTime">false</control-param>
<control-param name="submitTime">false</control-param>
</control>
<control template="/org/alfresco/components/form/controls/datevalidation.ftl"></control>
<constraint-handlers>
<constraint type="MANDATORY" validation-handler="Alfresco.forms.validation.validateDate" event="keyup" />
</constraint-handlers>
</field>
‍‍‍‍‍‍‍‍‍‍‍‍

This is in my share config

<javascript>
Alfresco.forms.validation.validateDate = function validateDate(field, args, event, form, silent, message)
{
   var today = new Date();
   var valid = false;

   if(today < field.value)
   {
      valid = true;
   }

   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 = "You cannot select a date that has passed as a due date";
       form.addError(form.getFieldLabel(field.id) + " " + msg, field);
   }

   return valid;
};
</javascript> Now this is my javascript to check the dates

And my control ftl virtually has nothing in it, this is where I get really confused:


<div class="form-field">
   <#if form.mode == "view">
      <div class="viewmode-field">
         <span class="viewmode-label">${field.label?html}:</span>
         <span class="viewmode-value">${field.value?html}</span>
      </div>
   <#else>
      <label for="${fieldHtmlId}">${field.label?html}:<#if field.mandatory><span class="mandatory-indicator">*</span></#if></label>
      <input id="${fieldHtmlId}" type="text" name="${field.name}" value="${field.value}" 
                   style="background-color: green; color: white; width: 700px;" <#if field.disabled>disabled="true"</#if> />
   </#if>
</div>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍

I would appreciate the help very much.
I am using alfresco 4.1.4 Enterprise version

Regards
DarkRedD