k-invalid-msg not working properly

2 posts, 0 answers
  1. Emil
    Emil avatar
    15 posts
    Member since:
    Feb 2015

    Posted 19 Oct 2016 Link to this post

    Here is an example which demonstrates the issue I am having. http://dojo.telerik.com/EcEgo

    To reproduce the issue, delete the value in the numeric text box and than click validate button. You should see the error message in the <span data-for="UnitPrice" class="k-invalid-msg"></span> which is defined by me in the DOM. After than click inside the numeric text box (focus) and then click outside the numeric text box to lose focus. You'll see 2nd validation message to appear.


    My question is - why this happens? Am I doing something wrong or this is a defect in NumericTextBox?


  2. Stefan
    Stefan avatar
    3040 posts

    Posted 20 Oct 2016 Link to this post

    Hello Emil,

    The second undesired message appears because the NumericTextBox is actually made from two input elements. One when the input is focused and one when it is not. In this scenario, both inputs are validated and this creates the undesired effect:


    I modified the example to work as expected:


    Also, please have in mind that initializing the Validator on every click of the button is not recommended as this will create a widget every time the button is clicked:


    I hope this is helpful.

    Telerik by Progress
    Build rich, delightful, *native* Angular 2 apps with Kendo UI for Angular 2. Try it out today! Kendo UI for Angular 2 (currently in beta) is a jQuery-free toolset, written in TypeScript, designed from the ground up to offer true, native Angular 2 components.
Back to Top