Making Component border red on validation fail

[Venkata]

Hi,

As per our requirement we need to show the component border to red when the component validation fails. Right now when the validation fails kendo is adding a span to the component. I don't need that message or a tool tip. I need to make all the fields which are invalid with red border and make the first error field focusable.

[Georgi Krustev]

Hi Venkata,

I answered to the support thread opened on the same subject. I would ask you to continue our discussion in only one thread to avoid any duplication. Thank you for the understanding.

Here is a quote of the answer I've posted in the support ticket:

The desired behavior can be accomplish with CSS rule that will hide the validation messages:

<style>
  .k-tooltip-validation {
    visibility: hidden
    // or
   //display: none !important;
  }
</style>

The Kendo UI validator applies "k-invalid" class to the invalid html elements. You can style it to show red border like this:

.k-widget > span.k-invalid,
input.k-invalid
{
  border: 1px solid red !important;
}

Here is a Dojo demo, that applies those styles and also uses MutationObserver to update the correct widget elements.

Regards,
Georgi Krustev
Telerik