k-invalid-msg not working properly

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

    Posted 19 Oct 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?

    Thanks.

  2. Stefan
    Admin
    Stefan avatar
    268 posts

    Posted 20 Oct 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:

    http://docs.telerik.com/kendo-ui/controls/editors/numerictextbox/overview#initialize-the-numerictextbox

    I modified the example to work as expected:

    http://dojo.telerik.com/UdOlO

    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:

    http://docs.telerik.com/kendo-ui/intro/installation/jquery-initialization#duplicate-initialization

    I hope this is helpful.

    Regards,
    Stefan
    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.
     
  3. Kendo UI is VS 2017 Ready
Back to Top