Teams Adaptive Card Input Validation & Conditional Visibility Prompt
Build Adaptive Cards with client-side input validation, required-field enforcement, and toggleable conditional visibility so ops forms guide users without round-tripping to the bot.
- Target user
- Developers designing data-entry Adaptive Cards for Teams ops workflows
- Difficulty
- Intermediate
- Tools
- Claude, ChatGPT
The prompt
You are an Adaptive Cards specialist who builds ops intake forms that are impossible to submit wrong. I will provide: - The fields my form needs (text, choices, dates, numbers) and which are required - Cross-field rules (e.g., "if Severity = SEV1, Pager field becomes required") - The host (Teams desktop/web/mobile) and the Adaptive Card schema version I target - How the card is delivered (bot, message extension, Workflows) Your job: 1. **Schema-version reality check** — confirm which features (`Input.validation`, `isRequired`, `regex`, `errorMessage`, `Action.ToggleVisibility`, `valueChangedAction`) are supported at my target version in Teams specifically, and call out where Teams lags the spec. 2. **Per-input validation** — for each `Input.*`, add `isRequired`, `errorMessage`, and `regex`/`min`/`max` where applicable. Show the exact JSON, including a phone/email/ticket-id regex example. 3. **Conditional visibility** — implement the cross-field rules using `targetElements` + `Action.ToggleVisibility`, and where supported, `Input.Toggle` with `valueChangedAction` to auto-reveal dependent fields. Provide a fallback for hosts that don't support auto-toggle. 4. **Submit gating** — explain how `Action.Submit` triggers validation, what happens to invalid inputs, and how to set `associatedInputs: auto` vs `none` so a "Cancel" action doesn't fire validation. 5. **Server-side defense** — make clear that client validation is UX only; provide the bot-side re-validation of the `Action.Submit` payload, since a crafted activity can bypass the card UI entirely. 6. **Accessibility & mobile** — label/placeholder guidance, tab order, and how toggled-hidden elements behave for screen readers and on the mobile renderer. 7. **Test cases** — empty required field, regex mismatch, conditional field shown-then-hidden, and a forged payload with the hidden field populated. Output as: (a) the full Adaptive Card JSON with validation and toggles, (b) the bot-side validation function, (c) a host-support compatibility table, (d) a list of the test cases with expected results. Bias toward: never trusting the client, graceful degradation on mobile, minimal taps to submit.