Add IsRequired to Inputs for basic validation

[pritambaldota]

Implementation status

• .NET
• Android
• iOS
• JavaScript
• UWP
• Documentation

Problem

Right now, users can submit a response with text boxes and other inputs that are completely empty. It'd be helpful if we at least added a property that makes an input required.

This probably should be linked to the action somehow, since there might be some actions on the card that require no inputs, while another action on the same card requires all inputs.

Asks

• Author - pritambaldota
• Author - thirteenflt

Research

• Telerik - Doing Form Validation Right In Mobile Applications
  • Ideally only validate one field at a time with an error at the top to not overwhelm users
  • If can't do that, use contextual validation errors
  • Do NOT disable the button till required inputs are entered
• Form validation best practices
  • Display contextually
    • On wide screens, to the right of the input is ideal
    • On narrow screens, below the input is ideal (no space to the right)
  • Display at the right time
    • Right after the user submits the information
    • Ideally instant validation (after they move to the next text field) is best
    • Instant validation that always has a green checkmark can be counter-intuitive for things like entering your name: "What is this green tick telling me, I know my own name?!"
  • Use the right color (red for problems, green for success)
  • Use clear language (have a conversation with the user)
• UX form validation

Solution

Add a requiredInputs property on Action elements.

Schema

New property on Action

Property	Type	Required	Description
requiredInputs	string[]	false	Specifies which inputs are required. If values are missing from those inputs when clicking this action, validation errors will be displayed and the action won't be performed.

OPEN QUESTION: Should we also allow authors to provide custom text for the validation error? Maybe that's a vNext feature? Or maybe we do it now? It probably shouldn't be required for authors to provide that text though, there's something nice about not needing to provide that text.

Example

{
  "type": "AdaptiveCard",
  "version": "1.0",
  "body": [
    {
      "type": "TextBlock",
      "text": "Please confirm your username"
    },
    {
      "type": "Input.Text",
      "id": "username",
      "placeholder": "Username"
    }
  ],
  "actions": [
    {
      "type": "Action.Submit",
      "title": "Confirm",
      "data": "action=confirm",
      "requiredInputs": [
        "username"
      ]
    },
    {
      "type": "Action.Submit",
      "title": "Cancel",
      "data": "action=cancel"
    }
  ]
}

Initial state

User clicks Confirm, we show validation errors (and trigger event to host telling host where it needs to scroll to, in case some of the invalid fields were off-screen)

User changes the input value, we remove the validation error. We'll re-validate upon button press again. So even if they type "a" and then delete it, the validation error should remain removed.

Note that we do NOT place the validation above the input, since it breaks the flow of the header text related to the input. And we can't place the validation above the header text, since inputs don't have a header property.

Other inputs

Host Config

New validation object that allows hosts to specify what required text they want. This is so that hosts can localize to the language they're running in. Plus, their app might have a different wording for validation errors, like "Value required".

{
  "fontFamily": "Segoe UI",
  "validation": {
    "requiredText": "Required"
  }
}

Down-level impact

Medium. Authors need to expect that users running down-level can still submit the card with empty inputs (most concerning for new authors who might assume that required property works, existing authors should already have that logic).

Renderer Requirements

1. A renderer must respect the requiredInputs property and not allow action execution until the required inputs are fulfilled.
2. A renderer should display the validation errors as described in this spec.
3. If displaying validation errors, a renderer must use the text provided in the host config. If none is specified, use "Required"

[thirteenflt]

+1

And it would be better to support validation based on customized rules. Rules could be regular expression.

[Kartik1607]

In .Net, there is a field called IsRequired.
Apparently it was removed for god knows why. Here is the link

[nitinka01]

Adaptive cards are used for capturing user input as well. Without having required property on input elements, there is no meaningful way to interact with user since the card once posted and displayed cannot be modified

[andrewleader]

Detailed spec needed identifying UI behaviors and whether the authors control error text, etc, which will impact how costly this is

[Kartik1607]

If it is not possible or costly to add a validation at front end, one approach I can think of is dynamically updating the adaptive card. Frontend renderer would have to assign a UID to each card. Once the submit action reaches server and server identifies some invalid fields server could post back message containing a new adaptive card JSON and the UID of card to be uodated. The front end would have the responsibility to update UI of an existing adaptive card or to render a new one based on UID. I don't know if this would be possible in channels like slack and Facebook though.

[Kartik1607]

@andrewleader Just saw the schema. I am wondering why is it that the required property is on action and not on input element directly. How about this schema?

{
  "type": "AdaptiveCard",
  "version": "1.0",
  "body": [
    {
      "type": "TextBlock",
      "text": "Please confirm your username"
    },
    {
      "type": "Input.Text",
      "id": "username",
      "placeholder": "Username",
      "required": "true",
      "requiredError": "User name is required to identify you. Please provide one."
    }
  ],
  "actions": [
    {
      "type": "Action.Submit",
      "title": "Confirm",
      "data": "action=confirm"
    },
    {
      "type": "Action.Submit",
      "title": "Cancel",
      "data": "action=cancel"
    }
  ]
}

It would be a nice additional feature to have the ability to set personalized error messages instead of a simple 'required' error field.

[andrewleader]

@Kartik1607 otherwise the user is unable to click Cancel without providing a username. Not all actions require the inputs. That's why it has to be specified on actions.

We certainly could allow a custom required validation error that authors can provide, is that a requirement for your scenarios?

[Kartik1607]

@andrewleader Ah! Makes sense. Custom error is not a requirement as of now, but I can image a number of use cases. Would be a good feature to have.

[HindoliyaYogesh]

@andrewleader I am in need of this feature for a customer who is using a bot in Microsoft Teams. Is there an ETA to this for .NET.
Also, would it be a good practice to do the server side validation of the card till the time this proposal is merged?

Cheers,
Y

[matthidinger]

Hi @HindoliyaYogesh, we haven't started work on this feature yet, but it should start relatively soon. That said, you should continue doing server-side validation even once the PR is merged and the package(s) are updated, because it will take some time to roll-out the update to all clients that render the bot cards (e.g., Microsoft Teams). Once Microsoft Teams supports adaptive cards v1.2 (which this feature is part of), then you can start taking advantage of it.

Please find the latest partner status details here

[andrewleader]

Closing as dupe of #1978