This is a migrated thread and some comments may be shown as answers.

Validation messages resizing the modal window

3 Answers 60 Views
This is a migrated thread and some comments may be shown as answers.
David
Top achievements
Rank 1
David asked on 21 Mar 2018, 01:37 PM

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

3 Answers, 1 is accepted

Sort by
0
Nencho
Telerik team
answered on 23 Mar 2018, 12:36 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
David
Top achievements
Rank 1
answered on 23 Mar 2018, 03:49 PM

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

0
Nencho
Telerik team
answered on 27 Mar 2018, 10:29 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Asked by
David
Top achievements
Rank 1
Answers by
Nencho
Telerik team
David
Top achievements
Rank 1
Share this question
or