如何在网络聊天自适应卡 1.2 版中将输入文本设为必填字段

Question

我正在使用 BotFramework WebChat 4.9.1 和自适应卡片 1.2，我需要几个必填字段。以下是我试过但不起作用的卡。理想情况下，在提交时应该用红色文本突出显示如果文本框为空，则需要名字。

{
  "$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"
      }
    }
  ]
}

上面的Json你可以在Design You Adaptive Card Here Please select the Host app and Target Version from the designer tool. Please help.试试是否可以使用针对 WebChat 的自适应卡，或者我必须在前端实现？

Answer 1

在检查 1.2.6 版的源代码时，我发现了一些秘密的 required-input 代码，这些代码可能只是为了测试目的，但实际上在网络聊天中确实有效。 proto-schema 看起来像这样：

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

如果这对你有用，那就太好了，但如果你想要更多的控制权，或者如果你碰巧使用的是更早版本的 Adaptive Cards，那么你将需要这个答案的其余部分。

当您谈论将输入字段设置为“必填”时，您似乎希望在单击提交操作且该字段为空时出现这两种行为：

您希望不处理提交操作
您希望显示错误消息

Web Chat 为它创建的每个自适应卡片指定一个动作处理程序，并且没有简单的方法来覆盖它，因此对于行为 #1，你最好的选择是让你的机器人检查传入的输入并 short-circuit 它的缺少所需输入时的逻辑。

对于行为 #2，您还可以在机器人端处理该问题，方法是让机器人向网络聊天发回一条消息，让用户知道自适应卡缺少哪些输入。或者，您可以发送一张新卡片，其中在第一张卡片中未填充的每个输入字段旁边都有一个额外的文本块。

如果您真的想在网络聊天端切换这些文本块，那么实际上可能有一种方法可以做到这一点。即使您无法覆盖网络聊天的提交操作行为，您也可以通过为每个操作提供一个 onExecute 处理程序来添加该行为。您必须阅读此答案以了解如何在网络聊天中应用特殊的自适应卡片功能：

如何在网络聊天自适应卡 1.2 版中将输入文本设为必填字段

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

json

botframework

adaptive-cards

web-chat