Client-Side Validation in VBCS Applications

This blog is part of the series Visual Builder Cloud Service Learning Path.

In this lesson, we'll look at setting up client-side validation in a VBCS Form.

Updating Your Project

This lesson builds on the Expense Report project we have been using in the VBCS Learning Path. 

1. Download this ZIP file to your computer.
2. If you are continuing from a previous chapter and already have the Expense Report project, open the project, click Import, and drag and drop the file into the dialog.
   
   

   

   
    
3. If you are starting at this lab and not continuing from a previous lab, go to the Visual Builder home screen, click Import > Import from File, and upload the ZIP there.

Setting Up Validation

First we have to set up our form to check the validity of its contents before submitting. We do this by surrounding the form with an <oj-validation-group> element, adding a custom isFormValid Javascript function that returns a boolean, and then calling that function before submitting the form.

1. Open my-expense-reports-create-expense-report
2. Switch to the Code view
3. Surround the expense-form div with <oj-validation-group id="CreateForm">. Don't forget the closing tag.
   

   

4. Now click the Expenses application node to open the main application editor and switch to the JS view
   

   

5. Add the isFormValid function:

           define([], function() {
               'use strict';
              
               var AppModule = function AppModule() {};
              	
               AppModule.prototype.isFormValid = function(form) {
                 var tracker = document.getElementById(form); 
                 if (tracker.valid === "valid") {
                   return true;
                 } else {
                   tracker.showMessages();
                   tracker.focusOn("@firstInvalidShown");
                   return false;
                 }
               }
             ...
             

6. Go back to the my-expense-reports-create-expense-report page. Click the Actions tab and open createExpenseReportChain.
7. Add an If action after Start.
8. Set the Condition to {{ $application.functions.isFormValid("CreateForm") }}
10. Move the Call businessObjects/cre… node to the true branch of the If action
    

Setting a Date Validation

Note that we are going to use the Expression Editor here to create the expression. The Expression Editor gives you code completion over all in-scope variables as well as JS error highlighting.

1. Go back to the Page Designer for my-expense-reports-create-expense-report.
2. Select the End Date field in the form.
   
   

   

   
    
3. In the General panel of the Property Inspector, click fx button for the the Min property.
   
   

   

   
    
4. In the left panel, expand {} expenseReport and double-click startDate. The editor enters:

   $variables.expenseReport.startDate

5. Run the page and try entering a date before the Start Date. The DatePicker for End Date makes all dates before the Start Date unavailable. If you manually enter a date before the Start Date it shows an error.

Using a Custom Validator

1. Open the JS panel for my-expense-reports-create-expense-report.
2. 
3. Add the endDateAfterStartDateValidator function:

   var PageModule = function PageModule() {};
               
     PageModule.prototype.endDateAfterStartDateValidator = function(startDate) {
       return [{
         validate: (endDate) => {
           if (endDate) {
             const valid = endDate >= startDate;
             if (!valid) {
               throw new Error('End date must be start date or later');
             }
             return valid;
           }
         },
       }];
     };
     
     return PageModule;
   });      

4. Return to the Page Designer panel and select End Date
5. In the General panel of the Property Inspector, delete the value for the Min property.
6. In the All panel of the Property Inspector, change the validators property to:

   {{ $page.functions.endDateAfterStartDateValidator($page.variables.expenseReport.startDate) }}

Setting Up the Page for Dynamic UI

Now we are going to do some dynamic UI around the amount and exchangeRate fields. There are a few things we need to do to set this up:

• Add the exchangeRate field to our Type and Variable
• Add the Input Number fields for Exchange Rate and Amount in USD (we will use this later)
• Give amount and exchangeRate a default value of zero. The reason we have to do this is that we are going to add some expressions that act over these fields. However, the REST call that initializes and populates these fields may not have completed before the page is displayed and the expressions are evaluated. To get around this, we can either wrap our whole form in an oj-bind-if tag to only load it once the expenseReport variable has been populated, or just give the fields some default values to initiate the variable on page load.

1. Open the Variables panel for my-expense-reports-create-expense-report and click the Types tab. Select the createExpenseReportRequest type.
2. Click Edit from Endpoint
3. Select Request -> exchangeRate and click Finish. Now if you look at the expenseReport variable in the Variables tab, you'll see it includes exchangeRate.
4. In the Property Inspector for expenseReport -> exchangeRate, set the Default Value to 1.
5. Select expenseReport -> amount and set the Default Value to 1.
6. In the Page Designer panel, add an Input Number field below Amount. In the General tab of the Property Inspector, change its Label Hint to Exchange Rate. In the Data tab, bind its Value to {{ $page.variables.expenseReport.exchangeRate }}
7. Drop a Currency field below Exchange Rate. In the General tab of the Property Inspector, change its Label Hint to Amount in USD. Make the field read-only.
   
   

   

Making a Field Conditionally Required

Let's make the Justification field required if the Amount is more than $500.

1. Select Justification
2. In the All panel of the Property Inspector, click the FX above the required property. Use the editor to set the following:

   {{ $variables.expenseReport.amount * $variables.expenseReport.exchangeRate >= 500 }}

3. Run the page and try entering 600 for the Amount. Justification becomes required.

The next lesson in the Visual Builder Cloud Service Learning Path is Computed Fields.

For more samples around validation check the VB cookbook input control section.