Search code examples
jsonadaptive-cards

Adaptive card conditional validation


I have an adaptive card like below

{
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "type": "AdaptiveCard",
  "version": "1.3",
  "body": [
    {
      "type": "TextBlock",
      "size": "Medium",
      "text": "Order Page",
      "wrap": true,
      "style": "heading"
    },
    {
      "type": "Input.Text",
      "label": "Item",
      "id": "item",
      "isRequired": true,
      "errorMessage": "Name is required"
    },
    {
      "type": "Input.Text",
      "label": "Quantity",
      "isRequired": true,
      "errorMessage": "Location is required",
      "id": "quantity"
    },   
    
  ],
  "actions": [
    {
      "type": "Action.Submit",
      "title": "Cancel",
      "data": {
        "buttonClicked": "cancel"
      }
    },
    {
      "type": "Action.Submit",
      "title": "Submit",
      "data": {
        "buttonClicked": "submit"
      }
    }
  ]
}

I am using this in a chat bot.

Here the user has to enter the item name & the quantity if they wish to order by clicking Submit button.

On the other hand if they change their mind and not wish to order, they can just click Cancel button.

However, since I have "isRequired": true, the card starts to validate even when the user clicks Cancel button. So, how to do the validation ONLY when Submit button is clicked but not when Cancel button is clicked?


Solution

  • There is a solution available. You can use the property "associatedInputs" and set it to "none".

        {
          "type": "Action.Submit",
          "title": "Cancel",
          "associatedInputs": "none",
          "data": {
            "buttonClicked": "cancel"
          }
        },
    

    You may find the relevant documentation here: https://adaptivecards.io/explorer/Action.Submit.html