Bug report

When the Validator component configuration is defined using the HtmlAttributes method, the validation message for the component is rendered inside the component's DOM structure. This results in appearing of the validation message between the component's input and popup list.

• If the validation message is defined using HtmlHelper as follows:
  @Html.ValidationMessageFor(model => model.SelectedOnsiteServiceType)
  The reported issue is not reproduced.

• For demo project, please refer to ticket 1455511

Reproduction of the problem

1. Define a MultiSelect inside a form as follows:
   @(Html.Kendo().MultiSelect() .Name("Months") .Placeholder("Start Typing...") .HtmlAttributes(new { style = "width:350px;", required = "required", data_required_msg = "Months is a Required Field", }) .DataSource(source => { source.Read(read => { read.Action("PopulateMonths", "Home"); }); }) )
2. Define the Validator component as follows:
   $(function () { $("form").kendoValidator(); });

Current behavior

The validation message appears between the input and popup of the component. The popup field doesn't cover the validation message.

Expected/desired behavior

The validation message should be inserted after the MultiSelect component in the DOM tree. Once the popup of the component appears on the screen, it should be stuck to the input field and cover the validation message.

Environment

• Kendo UI version: 2020.1.219
• jQuery version: x.y
• Browser: [all]