Validation of range with numberrange.ftl

[mcasanket]

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 only numbers no special characters and text.
My code in share-config.xml is as below.

<config evaluator="string-compare" condition="Advhttp://d1.openx.org/ck.php?n=aff1db45&cb=1497122073ancedSearch">
      <advanced-search>
         <forms>
            <form labelId="search.form.label.cm_content" descriptionId="search.form.desc.cm_content">cm:content</form>
            <form labelId="search.form.label.cm_folder" descriptionId="search.form.desc.cm_folder">cm:folder</form>
       [b]<form labelId="Search By Size" descriptionId="Search by size">cm:content</form>[/b] <!– Mine –>
         </forms>
      </advanced-search>
   </config>

<config evaluator="model-type" condition="cm:content">
  <forms>
   <form id="search"> 
    <field-visibility>
       <!– <show id="kb:ilLevelOne" /> –>
       <show id="mimetype" />
       <show id="cm:categories" force="true"/>  
       <show id="size" />
    </field-visibility>
    <appearance>
       <field id="mimetype" label="Document Type">
           <control template="/org/alfresco/components/form/controls/mimetype.ftl" />
       </field>
       <field id="cm:categories" label="Document Category">
          <control>
               <control-param name="compactMode">true</control-param>
           </control>
      </field>          
  
   <!– Number Range for file range.–>
       <field id="size" label="Document Size">
          <control template="/org/alfresco/components/form/controls/numberrange.ftl" />     
       </field>
    </appearance>
   </form>
  </forms>
</config>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Please help!
Thanking you!

[jpotts]

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

[flm]

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-IN...

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

[darkredd]

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