如何在BotFramework WebChat 4.9.1的Adaptive Card 1.2中设置必填输入字段

First, let's clear up a small syntax issue in your card JSON: Adaptive Card properties are case-sensitive, so Required should be lowercase required. That said, even with this fix, WebChat 4.9.1 doesn't natively support the required and requiredMessage properties for input validation. The Adaptive Card spec defines these properties, but it's up to the host (in this case, WebChat) to implement the validation logic—and this version of WebChat doesn't include that out of the box.

So to get the behavior you want (red error messages when fields are empty on submit), you'll need to add custom frontend code to handle validation. Here's how to do it:

Step 1: Keep Your Card JSON (With Fixed Case) #

First, update your card to use lowercase required (this will make it easier to reference in your validation code):

{
  "$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 your date of birth"
                }
              ]
            }
          ]
        }
      ]
    }
  ],
  "actions": [
    {
      "type": "Action.Submit",
      "title": "Submit",
      "data": { "result": "submit" }
    }
  ]
}

Step 2: Add Frontend Validation Logic #

You'll need to listen for the submit action in WebChat, validate the input fields, and show error messages if any required fields are empty. Here's a vanilla JavaScript example using WebChat's store and direct line connection:

// Assume you've already initialized WebChat with store and directLine
store.subscribe(() => {
  const state = store.getState();
  const lastAction = state.webChat.lastAction;

  // Check if the action is a submit from the adaptive card
  if (
    lastAction &&
    lastAction.type === 'DIRECT_LINE/POST_ACTIVITY' &&
    lastAction.payload.activity.type === 'message' &&
    lastAction.payload.activity.value
  ) {
    const submittedData = lastAction.payload.activity.value;
    const card = lastAction.payload.activity.attachments?.[0]?.content;
    const errors = [];

    // Traverse the card's structure to find required inputs
    const checkItems = (items) => {
      items.forEach(item => {
        if (item.type === 'ColumnSet') {
          item.columns.forEach(column => checkItems(column.items));
        } else if (item.type === 'Container') {
          checkItems(item.items);
        } else if (item.type.startsWith('Input.')) {
          const inputId = item.id;
          const isRequired = item.required;
          const requiredMsg = item.requiredMessage;
          const inputValue = submittedData[inputId];

          // Validate: check if required and value is empty/whitespace
          if (isRequired && (!inputValue || inputValue.trim() === '')) {
            errors.push(`*${requiredMsg}`);
          }
        }
      });
    };

    checkItems(card.body);

    if (errors.length > 0) {
      // Abort the original submit action
      lastAction.meta.abort();
      // Send an error message from the bot (styled in red via markdown)
      directLine.postActivity({
        type: 'message',
        from: { role: 'bot' },
        attachments: [
          {
            contentType: 'text/markdown',
            content: `**Please fix the following issues:**\n\n${errors.join('\n')}`
          }
        ]
      }).subscribe();
    }
  }
});

Alternative: In-Card Error Display #

If you want to show errors directly on the card (instead of a separate message), you can add hidden TextBlock elements with red text to your card (set isVisible: false initially). Then, when validation fails, update the card's isVisible property for the relevant error blocks and send the updated card back to the user. This requires modifying the card content in your frontend and triggering a card update.

Note on WebChat Versions #

If you're able to upgrade WebChat to version 4.15 or later, newer versions have better support for Adaptive Card's built-in validation properties. But since you're on 4.9.1, the frontend custom code approach is your only option.

内容的提问来源于stack exchange，提问作者Satish Patel