This is a migrated thread and some comments may be shown as answers.

Highlighting controls on validation

3 Answers 650 Views
Validation
This is a migrated thread and some comments may be shown as answers.
AP
Top achievements
Rank 1
Iron
Iron
Veteran
AP asked on 17 Feb 2016, 12:04 PM

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

3 Answers, 1 is accepted

Sort by
0
Kiril Nikolov
Telerik team
answered on 19 Feb 2016, 09:00 AM
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!
 
0
AP
Top achievements
Rank 1
Iron
Iron
Veteran
answered on 19 Feb 2016, 12:45 PM

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?

0
Kiril Nikolov
Telerik team
answered on 22 Feb 2016, 08:54 AM
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!
 
Tags
Validation
Asked by
AP
Top achievements
Rank 1
Iron
Iron
Veteran
Answers by
Kiril Nikolov
Telerik team
AP
Top achievements
Rank 1
Iron
Iron
Veteran
Share this question
or