Skip to content

feat(webform): add support for conditional #states.required validation

Walter requested to merge feature/webform-conditional-required-states into master

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.visible and #states.invisible
  • The #states.required condition was completely ignored
  • Field components only read the static #required property

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 #required value 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 #required as 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

Merge request reports

Loading