NumericTextBox - invalid border color

4 posts, 0 answers
  1. Bob
    Bob avatar
    123 posts
    Member since:
    Sep 2012

    Posted 24 Jul 2014 Link to this post

    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*/
    }
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2592 posts

    Posted 28 Jul 2014 Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. Bob
    Bob avatar
    123 posts
    Member since:
    Sep 2012

    Posted 29 Jul 2014 in reply to Iliana Nikolova Link to this post

    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">
  5. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2592 posts

    Posted 31 Jul 2014 Link to this post

    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!
     
Back to Top
Kendo UI is VS 2017 Ready