Check if an input form is filled in, in a Adaptive Card

Question

You can use input forms in an Adaptive card. But how can i check if the fields are filled in without going further to the next dialog. So after i clicked a submit button, it should check if the fields are filled in.

Code: nodejs

Example: http://adaptivecards.io/samples/InputForm.html

Answer 1

You can validate the inputs and control the dialog water fulls in bot application. E.G.

var bot = new builder.UniversalBot(connector, [(session,args,next) => {

    if (session.message && session.message.value) {
        // A Card's Submit Action obj was received
        if (processSubmitAction(session, session.message.value)) {
            next(session.message.value)
        }
        return;

    } 
        // Display Welcome card with Hotels and Flights search options
        var card = {
            'contentType': 'application/vnd.microsoft.card.adaptive',
            'content': {
                "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
                "type": "AdaptiveCard",
                "version": "1.0",
                "body": [{
                    "type": "ColumnSet",
                    "columns": [{
                            "type": "Column",
                            "width": 2,
                            "items": [{
                                    "type": "TextBlock",
                                    "text": "Tell us about yourself",
                                    "weight": "bolder",
                                    "size": "medium"
                                },
                                {
                                    "type": "TextBlock",
                                    "text": "We just need a few more details to get you booked for the trip of a lifetime!",
                                    "isSubtle": true,
                                    "wrap": true
                                },
                                {
                                    "type": "TextBlock",
                                    "text": "Don't worry, we'll never share or sell your information.",
                                    "isSubtle": true,
                                    "wrap": true,
                                    "size": "small"
                                },
                                {
                                    "type": "TextBlock",
                                    "text": "Your name",
                                    "wrap": true
                                },
                                {
                                    "type": "Input.Text",
                                    "id": "myName",
                                    "placeholder": "Last, First"
                                },
                                {
                                    "type": "TextBlock",
                                    "text": "Your email",
                                    "value": "somevalue",
                                    "wrap": true
                                },
                                {
                                    "type": "Input.Text",
                                    "id": "myEmail",
                                    "placeholder": "youremail@example.com",
                                    "style": "email"
                                },
                                {
                                    "type": "TextBlock",
                                    "text": "Phone Number"
                                },
                                {
                                    "type": "Input.Text",
                                    "id": "myTel",
                                    "placeholder": "xxx.xxx.xxxx",
                                    "style": "tel"
                                }
                            ]
                        },
                        {
                            "type": "Column",
                            "width": 1,
                            "items": [{
                                "type": "Image",
                                "url": "https://upload.wikimedia.org/wikipedia/commons/b/b2/Diver_Silhouette%2C_Great_Barrier_Reef.jpg",
                                "size": "auto"
                            }]
                        }
                    ]
                }],
                "actions": [{
                    "type": "Action.Submit",
                    "title": "Submit"
                }]
            }
        };


        var msg = new builder.Message(session)
            .addAttachment(card);
        session.send(msg);


}, (session, results) => {
    session.send(JSON.stringify(results))
}]);

function processSubmitAction(session, value) {
    var defaultErrorMessage = 'Please complete all the search parameters';
    if (!value.myName) {
        session.send(defaultErrorMessage);
        return false;
    } else {
        return true;
    }
}

Hope ut helps.

Answer 2

Adaptive Cards do not have client-side validation so you would have to retrieve the values from your bot service and verify on the server. If the fields are not filed in as you expect then you can send a response back to the user with what they should fill in. Take a look at this bot to see an example, go through a few of the steps in the dialog and when prompted for an input, send a blank response, and the bot will respond with a friendly message asking you to fill in the field(s).

http://contososcubabot.azurewebsites.net/

Source code: https://github.com/matthidinger/ContosoScubaBot