Highlighting controls on validation

4 posts, 0 answers
  1. AP
    AP avatar
    187 posts
    Member since:
    Apr 2010

    Posted 17 Feb Link to this post

    From another post, I was able to apply the styles:-

     

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

     

    Which changes textbox borders to red, where validation has failed. This works, but I would also like to apply the same style to text areas and kendo dropdown lists. How can I achieve this?

     

    Thanks

  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 19 Feb Link to this post

    Hello Andrew,

    This approach will not work for the DropDownList widget as it has different rendering. However a solution is discussed in the following forum topic:

    http://www.telerik.com/forums/validation-problem-with-dropdown

    Regards,
    Kiril Nikolov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. AP
    AP avatar
    187 posts
    Member since:
    Apr 2010

    Posted 19 Feb in reply to Kiril Nikolov Link to this post

    Thanks. I've managed to get the drop-downs highlighting now (code below)

    var validator= $('#frm').kendoValidator({
                validate:function(e){
     
                    var dropDowns = $(".k-dropdown");
     
                    $.each(dropDowns, function (key, value) {
     
                      
     
                        var input = $(value).find("input.k-invalid");   
     
                        var span = $(this).find("span.k-dropdown-wrap");
     
                        if (input.size() > 0) { //if there is an input in here with k-invalid...
     
                            $(span).addClass("dropdown-validation-error");
     
                        } else {
     
                            $(span).removeClass("dropdown-validation-error");
     
                        }
     
                    });
                }
            }).getKendoValidator();
     
            var x = validator.validate();

    And the style:-

    .dropdown-validation-error {
     
           border: 1px solid red !important;
     
           background-color: #fee !important;
     
       }

    However, what style can I use to highlight text areas?

  5. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 22 Feb Link to this post

    Hello Andrew,

    You need to select the textarea with the corresponding css class and apply the same approach as the one for the dropdownlist.

    Regards,
    Kiril Nikolov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready