Validation tooltip does not clear after data has been corrected

[Christopher]

Hi,

 

We have an issue in our application where the validation tooltip does not hide even after the data is corrected.

 

Following are the controls involved and the flow that causes the issue to be shown:

1. We had a kendo grid on our page that we created using the MVC HTML helpers

2. The grid has a editor template ( which is another view ) and the edit mode is pop-up.

3. On the editor pop-up, we have a textbox whose max string length is 50 characters.

4. The application is running on Chrome.

5. When I edit a row the editor pop-up opens with the values populated in the respective fields.

6. I add 51 characters in the field with max length of 50 characters. This causes the kendo validator to show the tooltip with the validation message for maximum allowed length.

7. I delete a character from the textbox such that the resultant length of the string is 50 characters, which is the max allowed number of characters, and so I expect that when I lose focus (tab out or click on some other location in the page), the tooltip will dissapear. However, the tooltip is still open even after the focus has been moved out of the textbox.

8. I again set focus in the textbox and delete another character such that the resultant length of the string is now 49 characters. I lose focus from the text box (tab out or click on some other location in the web page) and I the tooltip is now removed (hidden).

 

Unfortunately, this is not an issue that I could reproduce (since it's inconsistent) and hence I could not create a dojo.

Could you please look into this and let me know if this is a known issue and the solution to this problem,

 

This behaviour, as I've said, is inconsistent and is occurring across multiple locations in the application.

I was trying to find a link that would explain how kendo initializes it's validators on it's editor templates so that I could debug the locations to understand the flow of code or the conditions that trigger the validations.

 

Any help would be appreciated.

Thanks.

[Preslav]

Hi Christopher,

I am sorry to hear that you are experiencing such a problem.

I was able to replicate a problem similar to the described. Here is what I did:

1. I have a textbox with 50 characters - this is Okay.
2. I added one character and the tooltip appeared - expected.
3. I remove the last character and the tooltip is still open. 

At this stage, this scenario is expected due to the fact that we are hiding the validation tooltip on model change. Since the model did not change(the string from step 1 and 3 are equal) the tooltip is still open.

That said, I logged this behavior as a bug. You could follow its status here:

• https://github.com/telerik/kendo-ui-core/issues/3385

Please, let me know if this is the case on your side. If it is, in the meantime as a workaround, you could explicitly call the validation when the input has changed. For example, check this Dojo:

• http://dojo.telerik.com/iVOLe

I look forward to hearing from you.


Regards,
Preslav
Progress Telerik

[Christopher]

Hi Preslav,

 

Thanks for looking into this.

Just a correction in the steps that I followed:

1. The maximum length for the textbox is 50 characters

2. I entered 51 characters and tabbed out (changed focus to some other control) and the tooltip appeared (expected)

3. I edited the text and deleted 1 character so that the length of characters is 50 characters and tabbed out (changed focus to some other control) and the tooltip was still visible (issue).

 

The only step that I added which was not mentioned in your steps was losing focus, which should've triggered the validation and hid the tooltip.

 

Thanks

[Christopher]

Also, the issue is randomly occurring across the application, hence it would be great if you could provide me generic solution (for example, a configuration update or adding some script to a global js which would take care of kendo window and modal grid editor pop-ups with validations in them).

 

Thanks

[Preslav]

Hi Christopher,

I am still not sure what might be the cause for this behavior on your side.

However, I believe that you could workaround this by manually invoking the validation of the input. For example, based on the example from my last reply, handle the edit event of the Grid and subscribe to the ".k-invalid" inputs. That said, the code might look like:

function onEdit(e) {
    e.container.on("change", ".k-invalid", function(e) {
        var grid = $("#myGridID").data("kendoGrid");
        if (grid.editable) {
            grid.editable.validatable.validateInput(this);
        }
    });
}

For a runnable example, check the modified Dojo:

• http://dojo.telerik.com/iVOLe/2

I hope this helps.


Regards,
Preslav
Progress Telerik