One of the use cases of utilizing a Business Rules engine is to act as a JavaScript Form Validation library in order to validate both complex UI behaviour and the relationship between its UI components. In the web application development world, there are many JavaScript Form Validation libraries already, from pure JavaScript, Angular to jQuery, and many others. Some of these are popular within the development community, like the jQuery validator plugin.

Challenges

When it comes to the implementation of any of these, they all become hard-coded in JavaScript! This is hard to understand for someone with no (or little) technical background. Managing rules actually changes your JavaScript application code.

To enable JavaScript Form Validation using business rules, there are couple of challenges to address:

  1. Leverage the existing framework in the market
  2. Make the form validations dynamic and easy to understand with business/domain experts
  3. Keep the UI validation form on the client side to avoid round trips and/or degrading the UX expression of users.
  4. Make sure there is a single source of truth that will be used for UI validation

Let's assume we have a form like the one below:
JavaScript Form Validation

Solution

Now let's see how we can address the challenges. To address this [Challenge #1], let's pick jQuery validation plugin which is very popular. We need now to provide a JSON object to jQuery validator plugin in order to set it up with the related fields.

And let's not build this rules object in JavaScript. Instead, we can simply put together a Decision Table like the one below:

JavaScript Form Validation using business rules

  • Now the Decision Table is the ‘source of truth’ that can be shared across different processes (i.e. UI for form validation and Server for the process input validation. [Challenge #2])
  • The above Decision Table is easy to understand for almost anyone with any technical skills as it visually (in tabular form) describes what it does. The Decision Table editor can be integrated into your Web UI and the business rules can be managed on the web without touching your JavaScript code! [Challenge #3]

As the result of executing this model you get a JSON object for your UI validation library:

jQuery Validator JSON2

Round Trips

The best practice for UI validation is to ensure the page does not made any unnecessary server calls to validate the users input.

In this scenario, on the page load we run the Decision Table that creates the JSON object for rules and pass the JSON object like any other resources to the web page. Then, the webpage uses the JSON object and configures the validator – in this case jQuery Form Validation plugin, although it can be any other form validation library. So, there would not be any round trip to the server at all. The page has the rules (the created JSON object by Decision Table) on the page load. [Challenge #4].

Conclusion

To allow your JavaScript Form Validation to work seemingly based on business rules you can use a Decision table or a Natural language model that creates the JSON rules object and passes this to your application.

This approach will:

  • Leverage the existing JavaScript Form Validation frameworks
  • Create a single source of truth to be used across different boundaries
  • Avoid the extra round trips on user data entry
  • Allow validation rules to be modeled and managed outside of your application code as a resource
  • Allow authoring integration to your Web Application using JavaScript UI components.

Last updated January 14th, 2020 at 07:42 am, Published January 31st, 2017 at 07:42 am