Enable Client-Side Validation for a Form

You may want to set up a form so that your application can check the validity of its contents before the user submits it.

To do this, surround the form with an oj-validation-group element, and add a custom isFormValid Javascript function that returns a boolean. You can then call that function before the form is submitted.

Suppose you have a form with three text fields. To set up a basic client-side validation for this form:

1. Open the page that contains the form.
2. Click the Code button to switch to the code view of the page.
3. Locate the div element that contains the oj-form-layout element. If it isn't already, enclose this div element in an oj-validation-group element that has an id attribute. For example:

   <oj-validation-group id="CreateForm">

   
   

   
   Description of the illustration common-clientval-element.png

   
   

   Make sure to add the closing tag.

4. Click Source View in the Navigator, then find your application's app-flow.js file:
   
   
   Description of the illustration common-clientval-app.png
   
   
5. Add the isFormValid function as shown here (the function code appears in bold):

   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;
       }
   };
   
   return AppModule;

6. Go back to the page with the form. Click the Save button, then select the Action Chains tab for the button and click createExpenseReportChain.
7. If an If action does not exist:
   1. Drag an If action after Start.
   2. In the Condition field, enter:

      {{ $application.functions.isFormValid("CreateForm") }}

      The argument to the isFormValid function is the id value for the oj-validation-group element.

   3. Move the Call REST businessObjects/... node to the true branch of the If action. For example:
      
      
      Description of the illustration common-clientval-acchain.png
      
      

You can now test the form validation.