How do I make Input text a required field in adaptive card version 1.2 for webchat

Question

I am using BotFramework WebChat 4.9.1 and adaptive card 1.2 and I need few fields to be mandatory. Following is the card I have tried but it does not work. Ideally on submit it should highlight with red text that First name is required if the text box is empty.

{
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "type": "AdaptiveCard",
  "version": "1.2",
  "body": [
    {
      "type": "ColumnSet",
      "columns": [
        {
          "type": "Column",
          "width": 2,
          "items": [
            {
              "type": "TextBlock",
              "text": "Email Sign Up Form",
              "weight": "Bolder",
              "size": "Medium"
            },
            {
              "type": "TextBlock",
              "text": "You'll get timely email notification",
              "isSubtle": true,
              "wrap": true
            },
            {
              "type": "Container",
              "$data": "properties",
              "items": [
                {
                  "type": "TextBlock",
                  "text": "First Name*",
                  "weight": "Bolder",
                  "wrap": true
                },
                {
                  "type": "Input.Text",
                  "id": "firstName",
                  "placeholder": "First Name",
                  "Required": true,
                  "requiredMessage": "First Name is required"
                },
                {
                  "type": "TextBlock",
                  "text": "Last Name*",
                  "weight": "Bolder",
                  "wrap": true
                },
                {
                  "type": "Input.Text",
                  "id": "lastName",
                  "placeholder": "Last Name",
                  "Required": true,
                  "requiredMessage": "Last Name is required"
                },
                {
                  "type": "TextBlock",
                  "text": "Email*",
                  "weight": "Bolder",
                  "style": "email",
                  "wrap": true
                },
                {
                  "type": "Input.Text",
                  "id": "email",
                  "placeholder": "Your Email",
                  "Required": true,
                  "requiredMessage": "email is required"
                },
                {
                  "type": "TextBlock",
                  "text": "DOB*",
                  "weight": "Bolder",
                  "wrap": true
                },
                {
                  "type": "Input.Date",
                  "id": "dob",
                  "value": "2017-09-20",
                  "Required": true,
                  "requiredMessage": "Please select you date of birth"
                }
              ]
            }
          ]
        }
      ]
    }
  ],
  "actions": [
    {
      "type": "Action.Submit",
      "title": "Submit",
      "data": {
        "result": "submit"
      }
    }
  ]
}

The Json above you can try in Design You Adaptive Card Here Please select the Host app and Target Version from the designer tool. Please help. Is it possible with adaptive card targeted for WebChat or this I'll have to achieve in front end?

Answer 1

While examining the source code for version 1.2.6, I came across some secret required-input code that was probably just meant for testing purposes but actually does work in Web Chat. That proto-schema looks like this:

{
  "type": "Input.Text",
  "id": "firstName",
  "placeholder": "First Name",
  "validation": {
    "necessity": "Required",
    "errorMessage": "First Name is required"
  }
}

If that works for you then great, but if you want more control or if you happen to be using an even earlier version of Adaptive Cards then you'll need the rest of this answer.

When you talk about making an input field "required" it seems like you want these two behaviors when a submit action is clicked and the field is empty:

1. You want the submit action to not be processed
2. You want an error message to be displayed

Web Chat specifies an action handler for each Adaptive Card it creates and there's no easy way to override that, so for behavior #1 your best option is to have your bot check the incoming inputs and short-circuit its logic if a required input is missing.

For behavior #2, you could also handle that on the bot side by having the bot send a message back to Web Chat that lets the user know which inputs are missing from the Adaptive Card. Alternatively, you could send a new card with an additional text block next to each input field that wasn't populated in the first card.

If you really want to toggle those text blocks on the Web Chat side then there may actually be a way to do that. Even if you can't override Web Chat's submit action behavior, you can add to the behavior by providing an onExecute handler for each action. You'll have to read this answer for an explanation of how to apply special Adaptive Card functionality in Web Chat: BotFramework-WebChat - Adaptive Card