Validation Message for KendoDropDownList

[Dale]

In a normal form which uses html validation adding required to a KendoDropDownList fails

 

Ive tried to research to find a solution, but its due to the field being hidden field behind the control

Thus you end up with an error similar to this

An invalid form control with name='CountryId' is not focusable. 

 

I wish to know the proper way to show a validation message for a required dropdownlist in MVC

[Ivaylo]

Hello Dale

Thank you for the details provided.

If you use HTML form and want to show a validation message when focusing on a Telerik ui DropDownList Component and not selecting an option, we need to have a kendo-validator set to true in the form tag. Here is an example:

<form asp-action="FormSubmit" asp-controller="Form" id="form" method="Post" kendo-validator="true" >

Also, the KendoDropDownList must have .HtmlAttributes method with attributes required set to required and validation message with value the message we want to show:

@(Html.Kendo().DropDownList()
    .Name("CountryId")
    .DataTextField("Text")
    .DataValueField("Value")
    .OptionLabel("Select a country")
    .BindTo(countries)
    .Label(l => {
        l.Content("Country:");
    })
    .HtmlAttributes(new { required = "required", validationmessage = "Country is required" })
)

Furthermore, there is an attached sample app to test the form and see how it works. I hope you will like the result.

Kind Regards,
Ivaylo
Progress Telerik