HOWTO: Validate a Layout Content

This tutorial will demonstrate how to validate the content of a form in Web UI to apply your own set of rules. In this example, we will see how to ensure that the end date of a contract is ulterior to its start date.

Prerequisites

• A Contract document type
• The Nuxeo Web UI addon installed on your instance.
• In Studio Modeler > Settings > Application Definition, make sure that Nuxeo Web UI is in the Packages to Install list.

Create a Validation Rule

1. In Studio Designer, go to your Contract document type under Local Types,
2. Next to the Create layout click on Configure
   the nuxeo-contract-create-layout.html is created
3. At the bottom of the page, click on Switch to code
4. Add an id attribute to the start date and end date elements so you can retrieve them later.
   Result should look like this:

      <nuxeo-date-picker id="contractStartDate" role="widget" value="{{document.properties.contract:start}}" label="Start Date"></nuxeo-date-picker>
      <nuxeo-date-picker id="contractEndDate" role="widget" value="{{document.properties.contract:endDate}}" label="End Date"></nuxeo-date-picker>
   

5. Add a validate function in the Polymer object found between the script tags.
   Result should now look like:

    [...]
   
    <script>
    Polymer({
      is: [...]
      behaviors: [...],
      properties: { [...] },
      // We're adding a function to validate form here
      // Don't forget to add a comma (,) after the properties object!
      validate: function() {
        // Validation logic will go here
      }
    });
    </script>
   
    [...]
   

6. Complete the validate function

   validate: function() {
    // Nuxeo uses Moment.js (https://momentjs.com) to work with dates on the UI side.
    // We'll leverage this library to do the check.
    if(moment(this.document.properties['contract:endDate']).isBefore(this.document.properties['contract:start'])) {
      // Set the field in error state to alert user
      this.$.contractEndDate.invalid = true;
   
      // Display a message
      this.$.contractEndDate.errorMessage = "Contract end date should be ulterior to its start date";
   
      // Validate function expects us to return a boolean
      // Used to tell if the form should be submitted
      return false;
    }
    return true;
   }
   

7. Final result should look like:

   [...]
   
   <nuxeo-date-picker id="contractStartDate" role="widget" value="{{document.properties.contract:startDate}}" label="Start Date"></nuxeo-date-picker>
   <nuxeo-date-picker id="contractEndDate" role="widget" value="{{document.properties.contract:endDate}}"   label="End Date"></nuxeo-date-picker>
   
   [...]
   
   <script>
   Polymer({
    is: 'nuxeo-contract-create-layout',
    behaviors: [Nuxeo.LayoutBehavior],
    properties: {
   
      /**
        * @doctype contract
        */
      document: {
        type: Object,
      },
   
    },
    // Don't forget to add a comma (,) after the properties object!
    // We're adding a function to validate form here
    validate: function() {
      // Nuxeo uses Moment.js (https://momentjs.com) to work with dates on the UI side.
      // We'll leverage this library to do the check.
      if(moment(this.document.properties['contract:endDate']).isBefore(this.document.properties['contract:start'])) {
        // Set the field in error state to alert user
        this.$.contractEndDate.invalid = true;
   
        // Display a message
        this.$.contractEndDate.errorMessage = "Contract end date should be ulterior to its start date";
   
        // Validate function expects us to return a boolean
        // Used to tell if the form should be submitted
        return false;
      }
      return true;
    }
   });
   </script>
   
   [...]
   

8. Save and deploy. You can check the result in your form now.

   ×
   

The same operation can be repeated for other layouts (typically the edit or import layouts).

Going further - Translating the Error Message

First we need to update the validation function to use a localized message.

On Nuxeo Designer side:

1. Open your layout
2. Click on Switch to code button at the bottom of the page,

3. In the validate function, replace:

   this.$.contractEndDate.errorMessage = "Contract end date should be ulterior to its start date";
   

   with:

   this.$.contractEndDate.errorMessage = this.i18n('label.error.message.contractEndDateShouldBeAfterStartDate');
   

4. Save your modifications.

Now we will define the message to display:

1. Still on Nuxeo Designer side, go to the UI tab and then Translations
2. Use the default messages.json or create your own language;
3. Create a new entry in the JSON file with key label.error.message.contractEndDateShouldBeAfterStartDate and your error message as value. Here it is:

   "label.error.message.contractEndDateShouldBeAfterStartDate":"Please make sure that the Contract end date is ulterior to its start date"
   

4. Save your changes and deploy your Studio project:

   ×
   

Done.