Making Component border red on validation fail

2 posts, 0 answers
  1. Venkata
    Venkata avatar
    1 posts
    Member since:
    Jun 2014

    Posted 04 Oct 2014 Link to this post


    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.
  2. Georgi Krustev
    Georgi Krustev avatar
    3747 posts

    Posted 08 Oct 2014 Link to this post

    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:
      .k-tooltip-validation {
        visibility: hidden
        // or
       //display: none !important;

    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,
      border1px solid red !important;

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

    Georgi Krustev
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top