Client side validation in Oracle Visual Builder

In this article, We’ll explain how to validate the Oracle Visual Builder form at the client level with the help of Validation Group component.

What is a Validation Group

Validation group in Oracle Visual Builder Monitors and Summarizes a group of components’ validity Status. Validation Group is used to check form-level Validity. In addition, component requirements are also checked.

We have many ways to validate the form elements. The two major methods are as follows:

Passing the Variables of the mandatory fields of a form to a JavaScript function and check the null, empty, and undefined conditions, and then return true or false from the JS function and basis on that fire a notification appropriately and do our action.
Wrapping the form fields inside a <oj-validation-group>, provide id to it and track the validity of the form, mark the mandatory fields as required, and trigger the JavaScript function which will check the validity of the form fields and return the message on every individual non filled mandatory field.

So of these two, We are going to explain how to use <oj-validation-group> element to check the mandatory fields.

LEARN ORACLE VISUAL BUILDER BY EXAMPLES

AN END-END-END VB COURSE THAT WILL HELP YOU TO LEARN ORACLE VISUAL BUILDER QUICKLY.

CLICK HERE TO BUY THIS COURSE.

Create a web application and follow the below steps to implement the <oj-validation-group> method:

Go to main-start page and drag and drop Validation Group from the Component pallet to the Design area, name the id as sown in the following screenshot:

2. Drag and drop Form Layout into the Valuation Group from the component pallet to the Design area, and name the id as sown in the following screenshot.

3. Drag and drop Input fields and mark them as mandatory for the fields that you would like to make mandatory from the property section:

4. To check the validity of the form element we need to trigger an event that will call the JS function. For that drag and drop a Button from the component pallet and change the label to Validate as shown in the following screenshot:

5. Click on the Validate button, switch to the Event tab, +New Event, and select OjAction as shown in the following screenshot:

6. Copy and paste the following JS snippet in the page JS tab to validate the form:

    validateGroup(id) {

      var tracker = document.getElementById(id);

      if (tracker.valid === "valid") {

      }

      else if (tracker.valid.startsWith("invalid")) {

        if (tracker.valid === "invalidHidden") {

          tracker.showMessages();

        }

        tracker.focusOn("@firstInvalidShown");

      }

      return tracker.valid;

    };

Drag and drop the Call Function action to the start node and select the validateGroup from the available JS functions as shown in the following screenshot:

7. Map the Valuation group Id to the id of the JS function as shown in the following screenshot:

8. Drag the If action after the Call Function action and add the following condition in the if block: $chain.results.callFunctionValidateGroup === ‘valid’

To the true path, drop the required actions as per your business requirement. The true path will be executed if all the mandatory fields are filled up.

Now preview the application and click on Validate button without filling in mandatory fields. You will notice mandatory fields are being highlighted with the red border along with validation error as shown in the following screenshot:

This is how we can implement the validation group in Oracle Visual Builder.

If you like this article, please like, comment, and share. Request you to subscribe to my YouTube Channel for more such videos and click on the bell icon to get regular updates.

Enter your keyword

post

Client side validation in Oracle Visual Builder

Further Readings