Cross-Field Form Validation in Oracle JET

JET keeps evolving and in the latest version, its toolkit provides improved support for form cross-field validation. It is much easier to implement validation than it was before. I will show it in this example.

Example of the data entry form. Validation logic:

• Invoice Date before Payment Due Date and Payment Date.

• Payment Due Date before Payment Date.

Example of when two fields fail validation:

JET provides a component called the validation group. The form can be wrapped by this component to identify if any validation errors are reported there. For example, when calling a JavaScript function, before proceeding with the function code, we can check if the validation group contains errors:

The input field can be assigned with a custom validator function:

Below is an example of validation function code where cross-field validation logic is implemented. In this example, we are comparing field values with other fields. If the validation rule condition is false, the validation error is thrown:

Below is an example of function code, where the validation group is checked for errors. If there are errors in the current validation group, then the errors are displayed and the first field with an error is focused in on:

Download the sample code from my GitHub repo.