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.
Specific Dropdowns and Their Needs
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.
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.
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.
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.
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.
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.
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
Define the Expression: Create a condition that checks if the
Are you currently in HIV care or under ART?equals 'No'.Apply the Expression: Use
hideWhenExpressionto make theReason for being in HIV care or on the ARTfield hidden unless the condition is met.
Code Example
"hide": {
"hideWhenExpression": "currentlyOnArt === 'a899b42e-1350-11df-a1f1-0026b9348838'"
}
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
iii ) Hiding the specified section
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
Define the Expression: Create a condition that checks if the age is less than or equal to 14.
Apply the Expression: Use
failaction 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.