feat(webform): add support for conditional #states.required validation
Summary
This MR adds support for Drupal's #states.required and #states.optional conditional validation in the Webform component.
Problem
When a Drupal webform field has conditional required rules via #states.required, the validation was not working in the React frontend. Users would see a generic "general error" instead of field-level validation messages because:
- The existing code only evaluated
#states.visibleand#states.invisible - The
#states.requiredcondition was completely ignored - Field components only read the static
#requiredproperty
Solution
Extended the determineVisibility function to also evaluate conditional required states:
-
#states.required: When condition is met → field becomes required -
#states.optional: When condition is met → field becomes optional (not required) - Falls back to static
#requiredvalue when conditions are not met
Changes
- Add
evaluateStateWithOperators()helper function (reduces code duplication) - Add conditional required state evaluation following the same pattern as visibility
- Preserve static
#requiredas fallback (important for backward compatibility) - Improve JSDoc documentation for state evaluation functions
- Simplify visibility evaluation code using the new helper
Testing
Tested with functietitel_anders and werkveld_anders fields which have:
'#states':
visible:
':input[name="functietitel"]':
value: 'Anders, namelijk:'
required:
':input[name="functietitel"]':
value: 'Anders, namelijk:'
Before: Field visible but no validation error when empty → generic error on submit
After: Field visible AND properly validates as required → field-level error message