Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 5 Next »

Validation Rule Builder for Form Builder

The Validation Rule Builder for Form Builder streamlines the creation and management of conditional logic within forms. It provides an intuitive user interface for dynamically building conditions, making it easier for users to handle complex form logic without worrying about underlying technical details.

Rule-builderUI.png

Specific Dropdowns and Their Needs

rule-builder explanation new.png

Trigger Component

The Trigger Component dropdown specifies the form field that the validation rule will apply to. This is the field whose value or state will be monitored to determine if the condition is met.

Trigger Condition

The Trigger Condition dropdown lets users define the specific condition to be checked on the Trigger Component. This could include options like "is empty", "not empty", "equals", “not equals”, "greater than or equal to", "less than or equal to", etc.

Conditional Value

The Conditional Value ( or target value ) dropdown is used to select or enter the value to be checked against the Trigger Condition. The Target Value component will only be visible if the conditions are "equals," "not equals," "greater than or equal to," or "less than or equal to."

Target Action

The Target Action dropdown specifies what action should be taken when the Trigger Condition is met. Examples: include hiding a field or custom validation logic.

Target Component

The Target Component dropdown allows users to select the form field that will be affected by the action defined in the Target Action dropdown. This lets users select which field they want to control based on the condition they define.

By configuring these dropdowns, users can create sophisticated validation rules that enhance the functionality and user experience of their forms without requiring extensive technical knowledge.

Working Principle

The core of the Validation Rule Builder revolves around a rule-builder component that offers a user-friendly interface for creating multiple conditional logic rules. Users can define conditions and actions that determine how form fields should behave based on specific inputs and criteria.

Benefits for Users

  • Ease of Use: Users can build complex validation rules without needing deep technical knowledge.

  • Dynamic Logic Building: Create and manage conditions dynamically, even for complex forms.

  • Time-Saving: Simplifies the form development process, reducing the need for custom coding.

Features

Toggle Functionality

Make a Field Required with a Simple Click

Ensure that users do not skip mandatory fields in your form. With a simple toggle button, you can make any field required.

Example:
In a form, if you want to ensure that the "Name" field is mandatory, simply toggle the "Required" option for the "Name" field to enforce this validation.

isRequired.gif

Allow or Disallow Future Dates

Control whether date fields can accept future dates. This is particularly useful for fields like "Date of Birth" where future dates should be restricted.

Example:
For a "Date of Birth" field, toggle the "Disallow Future Dates" option to ensure users cannot select a date in the future.

Disallow Decimal Values

Enable fields to decline decimal values when necessary. For example, age cannot be in decimal values.

Example:
For an "Age" field, toggle the "Disallow Decimal Values" option to decline entries like 12.2.

disAllow Decimals.gif

Conditional-Logic Functionality

Conditions
Check if a Field is Empty or Not Empty

Example:
Build a condition to check if the "Name" field is empty and trigger a corresponding action if it is.

Name is empty.png

Check if a Field is Equal to a Target Value

Example:
Check if the "Sex" field value is equal to "F" and display relevant fields accordingly.

Gender is equal to F.png

Check if a Field's Value is Greater Than or Less Than a Target Value

Example:
Ensure the "Age" field value is greater than 18 to display additional fields for adult users.

Age is greater than equals to 18.png

Multiple Conditions

Combine conditions using logical operators (&&, ||) to build comprehensive validation rules.

Example:
Check if the Name and Age fields are not empty, then show relevant fields accordingly.

multiple-conditions.png

Actions

hideWhenExpression

i ) Hiding the form field

The hideWhenExpression action allows you to control the visibility of form fields based on specified conditions. This is particularly useful when you want certain fields to appear only when certain criteria are met, enhancing the user experience by showing only relevant fields.

Example Scenario

Consider a scenario where you are building a form that has two fields: Are you currently in HIV care or under ART? and Reason for being in HIV care or on ART. You want the Reason for being in HIV care or on the ART field to be visible only if Are you currently in HIV care or under ART? is equal to Yes.

How It Works
  1. Define the Expression: Create a condition that checks if the Are you currently in HIV care or under ART? equals 'No'.

  2. Apply the Expression: Use hideWhenExpression to make the Reason for being in HIV care or on the ART field hidden unless the condition is met.

Code Example
"hide": {
    "hideWhenExpression": "currentlyOnArt === 'a899b42e-1350-11df-a1f1-0026b9348838'"
}
hideWhenExpression.gif


In this example, the Reason for being in HIV care or the ART field will only be shown when the Are you currently in HIV care or under ART? is equal to Yes.

ii ) Hiding the specified page

Hide (page).mov

iii ) Hiding the specified section

Hide (section).mov

failsWhenExpression

The failsWhenExpression action is used to define custom validation logic that determines when a form input should fail validation. This is useful for scenarios where default validation rules are not sufficient and you need to create more complex, condition-based validations.

Example Scenario

Imagine you are creating a form where the user's age and their response to a question need to be validated together. Specifically, the question must be answered if the user's age is less than or equal to 14.

How It Works
  1. Define the Expression: Create a condition that checks if the age is less than or equal to 14.

  2. Apply the Expression: Use fail action to enforce this validation.

Code Example
"validators": [
    {
      "type": "js_expression",
      "failsWhenExpression": "height <= 0",
      "message": "Height should be greater than or equal to zero"
    }
]

In this example, the height field will fail validation if it is height is lesser than zero. When the condition evaluates to true, the provided message will be displayed, indicating the validation error.

Detailed Breakdown
  • Expression: The logical condition that must be met for the validation to fail.

  • Message: The error message displayed to the user when the validation fails.

FailsWhenExpression.mov

  • No labels