NumericTextBox - invalid border color

[Bob]

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*/
}

[Iliana Dyankova]

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

 

 

[Bob]

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">

[Iliana Dyankova]

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