0

I am using the AdaptiveCard input form in my microsoft chatbot for getting user information. Is there any way to validate the TextInput? Like asp.net field validator? or any property in c# through which i can validate the all kind of TextInput of the AdaptiveCard.

var card = new AdaptiveCard()
{
    Body = new List<CardElement>()
    { 
       new TextBlock() { Text = "Email" },
       new TextInput()
       {
           Id = "Email",
           Placeholder = "Enter your email",
           Style = TextInputStyle.Email,
           IsRequired = true
       },


       new TextBlock() { Text = "Mobile" },
       new TextInput()
       {
           Id = "Mobile",
           Placeholder = "+(country code)(Your Phone Number)",
           Style = TextInputStyle.Tel,
           IsRequired = true
       },
    },

    Actions = new List<ActionBase>()
    {
       new SubmitAction()
       {
           Title = "Submit"
       }

   }
};
Attachment attachment = new Attachment()
{
    ContentType = AdaptiveCard.ContentType,
    Content = card
};

Fetching data from the Adaptive Card MessageReceivedAsync

protected async Task MessageReceivedAsync(IDialogContext context, IAwaitable<IMessageActivity> result)
{
    var message = await result;

    PersonalInfo userinfo = new PersonalInfo();
    if (message.Value != null)
    {
        // Got an Action Submit
        dynamic formvalue = message.Value;

        if (formvalue != null)
        {

            userinfo.Email = GetValue((JObject)formvalue, "Email");
            userinfo.Phone = GetValue((JObject)formvalue, "Mobile");

            var error = GetErrorMessage(userinfo); // Validation

            IMessageActivity replyMessage = context.MakeMessage();

            if (!string.IsNullOrEmpty(error))
            {
                replyMessage.Text = error;
                await context.PostAsync(replyMessage);
            }
            else
            {
                // Save Information in service bus
                if (sbConnectionString != "" && queueName != "")
                    await MainAsync(sbConnectionString, queueName, userinfo);

                replyMessage.Text = "Thank you for taking the time! \n We've submitted your query and an agent will get back to you soon. \n\n Have a great day!";
                await context.PostAsync(replyMessage);
                context.Done(true);
            }

        }
    }
}

// For Validating the Adaptive Card **GetErrorMessage** function pass userinfo

GetErrorMessage(PersonalInfo personalInfo){

    if (string.IsNullOrWhiteSpace(personalInfo.Email)
        || string.IsNullOrWhiteSpace(personalInfo.Phone))
        return "Please fill out all the fields";

    return string.Empty;

}
Kyle Delaney
  • 11,616
  • 6
  • 39
  • 66
  • Possible duplicate of [Check if an input form is filled in, in a Adaptive Card](https://stackoverflow.com/questions/47331266/check-if-an-input-form-is-filled-in-in-a-adaptive-card) – Trevor Apr 09 '19 at 15:47
  • You would validate the text from the Adaptive Card the same way you'd validate any other text, like text the user typed. Can you show us some code so we can see what you've tried so far? – Kyle Delaney Apr 09 '19 at 20:41
  • var card = new AdaptiveCard() { Body = new List() { new TextBlock() { Text = "Mobile" }, new TextInput() { Id = "Mobile", Speak = "Please enter your mobile with country code.", Placeholder = "+(country code)(Your Phone Number)", Style = TextInputStyle.Tel, IsRequired = true } }, Actions = new List() { new SubmitAction() { Title = "Submit", Speak = "Submit" } } }; – Qaisar Shabbir Awan Apr 11 '19 at 07:01
  • 1. Never ever post multiline code in a Stack Overflow comment. Always post your code in the question itself. I did it for you, but I had to manually format your code line by line. There would've been no need to do that if you had posted your code by editing your question, since the line breaks would have been preserved. – Kyle Delaney Apr 18 '19 at 03:05
  • 2. Do not use the Microsoft.AdaptiveCards package. Use the AdaptiveCards package instead. It is currently on version 1.1.2 – Kyle Delaney Apr 18 '19 at 03:07
  • 3. You have only given us the code that creates your Adaptive Card. I asked what you've tried so far, so we need the code that is meant to validate user input. If you want to validate user input in the channel client then that's impossible unless you create your own client. You will most likely want to validate the input once it has already been sent to the bot. – Kyle Delaney Apr 18 '19 at 03:10
  • Yes but i did not get any proper solution on it:( – Qaisar Shabbir Awan Apr 25 '19 at 11:50
  • Can you edit your question to include more information? Please provide the code that responds to the adaptive submit action. – Kyle Delaney Apr 25 '19 at 22:19
  • I have updated all the code. In first function i am creating the AdaptiveCard in second function i am fetching Card information and in third one i have done manually validation for required field. – Qaisar Shabbir Awan Apr 29 '19 at 10:03
  • Your code looks good. Is it not working? – Kyle Delaney Apr 29 '19 at 19:40
  • Ya it is working properly but issue is that i want to validate controls same like asp.net validation.. example is below https://github.com/Microsoft/AdaptiveCards/issues/808 – Qaisar Shabbir Awan Apr 30 '19 at 08:15
  • So to be clear, you want to perform validation in the front end (card) rather than the back end (bot)? Are you saying you want to access a feature of Adaptive Cards that you can see for yourself (since you linked the issue) hasn't been implemented yet? What channel are you using? – Kyle Delaney May 01 '19 at 18:50
  • Thanks for your consistent support, ya you are right i want validation in the front end (card). Right now we are using the Web Chat channel. – Qaisar Shabbir Awan May 05 '19 at 06:37
  • Is my answer acceptable? – Kyle Delaney May 13 '19 at 21:20

1 Answers1

1

The isRequired field in the Adaptive Card schema is deprecated. You can see the current schema here.

The NuGet package you're using is also deprecated, as you can see here. Please use this instead.

The Adaptive Card schema does not support client-side validation. If you want client-side validation then you will have to write your own Direct Line client, possibly by forking the Web Chat repo.

Kyle Delaney
  • 11,616
  • 6
  • 39
  • 66