Validation messages resizing the modal window

[David]

Hi,

By using the Kendo validator on a modal window (kendo-window) containing some required fields, I've got this issue:

• I try to save everything without filling the fields, the validation messages will appear below the required fields, resizing the modal window;
• I fill a required field and then click the save button. This required field will lose its focus, triggering the validation event that will hide the validation message, thus resizing the window and because of that, the click event on that save button will not be fired because the button is not below the cursor anymore;

I saw that there is a validateOnBlur option that I need to be enabled but it is used only when the field lose its focus. Is there a way to fire the validation event while the user is typing or changing the field data? It would fix that problem because the modal window will be resized before the user can click on the save button.

I am using the VueJS Wrappers.

Thanks

[Nencho]

Hello David,

By design, the kendo Validator does not possess such builtin functionality, where the validation is triggered on each character typed/deleted from the given element. You can achieve this, however, subscribing for the keydown event of the element and manually trigger the validate() method of the Kendo Validator.

In the first example below, you can observe how the validate method is used on the button click event:

https://www.telerik.com/kendo-vue-ui/components/validator/

Regards,
Nencho
Progress Telerik

[David]

Thanks Nencho for your reply,

I used the events to validate the components manually by binding the input event and it worked fine, excepted for the Kendo components. For example, I want to validate kendo-datepicker and that component have these events: change, close and open. None of these events will fire while I am typing. The change event is working fine but it doesn't fix my issue explained earlier because it fires only when I press the enter key or when the component loses its focus.

An another solution that I think would fix this issue would be to do a fading animation on the validation message so the modal window will wait until the animation has been completed before resizing, maybe giving enough time to fire the click event of the save button. My new question is how to implement a fade-in / fade-out animation on the validation message? Even if it doesn't fix my issue, It would be nice to have an animation there.

Have a nice day!

David

[Nencho]

Hello David,

In order to trigger the validation for the datepickers, you could still subscribe for the keydown event of the input element of the widget. Please consider the following implementation:

mounted: function () {

 var picker = this.$refs.picker.kendoWidget()
 var validator = this.kendoValidator

 picker.element.on('keydown', function(e){
 validator.validate()
 })
}

Also, in the following plunker you can find a runnable example on the above-suggested implementation.
https://plnkr.co/edit/NpUArCslyrpTsFtFIPa0?p=preview

As for the fading messages, you can consider using our kendo effects as demonstrated in the following demo:

https://demos.telerik.com/kendo-ui/fx/slidein

Hope this would help.

Regards,
Nencho
Progress Telerik