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

NumericTextBox - invalid border color

3 Answers 558 Views
NumericTextBox
This is a migrated thread and some comments may be shown as answers.
Bob
Top achievements
Rank 1
Bob asked on 24 Jul 2014, 08:46 PM
Hi, I'm trying to have the numeric textbox display with a red border if invalid value.  The below styling is setting the border red on some hidden textbox and not the wrapper.  Any ideas? Hacks? Work-arounds?

input.input-validation-error {
 border: thin solid red !important; /*!important forces override of borders set on kendo controls*/
}

3 Answers, 1 is accepted

Sort by
0
Iliana Dyankova
Telerik team
answered on 28 Jul 2014, 08:53 AM
Hi Bob,

For this requirement I would suggest to use the jQuery API - find the NumericTextbox wrapper and use the css method to set border. As an example: 
$(".k-input.k-invalid").parent(".k-numeric-wrap").css("border", "1px solid red");

Regards,
Iliana Nikolova
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Bob
Top achievements
Rank 1
answered on 29 Jul 2014, 08:13 PM
When I look in IE11 Dom Explorer, it shows that the second input for this control correctly gets the invalid class but the "Formatted" input does not and still has the "valid" class.  I would think this is a bug.


<input tabindex="0" class="k-formatted-value k-input valid" aria-disabled="false" aria-readonly="false" style="display: inline-block;" type="text">
 
<input name="myInput" class="k-input input-validation-error" id="myInput" role="spinbutton" aria-disabled="false" aria-readonly="false" aria-valuenow="" aria-valuemin="1" aria-valuemax="45" style="display: none;" type="text" min="1" max="45" value="6" data-role="numerictextbox" data-val-required="*" data-val="true" data-val-range-min="1" data-val-range-max="45" data-val-range="Must be from 1 to 45." data-val-number="my input label">
0
Iliana Dyankova
Telerik team
answered on 31 Jul 2014, 12:33 PM
Hi Bob,

If I am right you are using jQuery Validate? Keep in mind Kendo UI NumericTextBox widget contains two input elements and only the initial one will be validated. You can workaround this using the approach suggested in this project

Regards,
Iliana Nikolova
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
NumericTextBox
Asked by
Bob
Top achievements
Rank 1
Answers by
Iliana Dyankova
Telerik team
Bob
Top achievements
Rank 1
Share this question
or