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

Keep focus on validator fails

8 Answers 42 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Bart
Top achievements
Rank 1
Bart asked on 13 May 2015, 07:37 AM

I have a client who requested when a kendo control can't validate, the focus is kept on the invalidate object.
This is something that to my knowledge isn't supported by default by the components.

So i've tried something like writing a validation rule like this (raw example, won't work)

rule :function(input){
    var isValid = false;
     //some code to do validation
     if(!isValid){
        var kendoComponent = $(input.id).data("kendoCombobox");
        input.focus();
    }
    return isValid
}

 

The problem i'm having is that before input.focus(), the next component shortly ahs focus, and by setting the focus to the invalidate compinent, the next components validation is triggered as well. The next component says it's invalid, and thus calls for the focus. Creating an endless loop between these 2 components each asking for focus.

To try and counter this, i've kept a dominantfield status. If the validation is triggerd for a none dominant component, that component should always say "i'm valid" thus not calling for focus. As far is i can determine following stacktraces and output logging, this code is working, though somewhere focus is still being called on the second component causing an infinite loop. while the custom code i wrote in my validation ruls never call .focus() on the second component. I can't figure out why the components would still keep trying to get focus. or why in the telerik js code, an infite loop would be created.

Any thoughts on why this infinte loop could be created, or any input as how else this functionality can be obtained?

8 Answers, 1 is accepted

Sort by
0
Bart
Top achievements
Rank 1
answered on 13 May 2015, 01:59 PM

Oké, in the mean time, i've been able to try some more things out. I've come to a state where my code to gain focus is absolutly not the issue anymore. the .focus() function is no longer part of my validation rules.

However i can still reproduce a situation where 2 telerik controls try to get focus simultaniously and they keep trying to get focus, thus an infinite loop of 2 controls alternating their focus.

Setup:

-webpage with 2 telerik comboboxes, both are required.
-We need a dual screens.
-windows 8 (might be reproducable in other windows versions)
-browser, i've confirmed this in IE 11 end Chrome 42

 

Steps to reproduce:
select both combobxos, --> their validationmessage ust show up. Now set focus to the first combobox.
Press the 'windows logo' key, then select the second combobox.
The expected result here would be that the second combobox is the active element/combobox, but instead the 2 comboboxes keep alternating their focus.


0
Georgi Krustev
Telerik team
answered on 15 May 2015, 07:20 AM
Hello Bart,

I am afraid that the given information is not enough the fully understand the case. Would it be possible to send us a simple Dojo demo that demonstrates the issue? This will help us to review the issue locally and follow you up with more details.

Regards,
Georgi Krustev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Ashraf
Top achievements
Rank 1
Iron
answered on 22 Apr 2021, 01:47 PM

I have a similar problem wherein the validator function is called in an infinite loop when lets say I change a date and then tab on to move to qty column. I have put a bunch of alerts FYR (Apologies in advance!)

http://dojo.telerik.com/uhupObIy

 

In this example, I am trying to validate the date - either picked through datepicker or even if it is keyed in manually ; and if it is less than the current date, it should automatically default to current date

 

Could you advise?

 

0
Neli
Telerik team
answered on 26 Apr 2021, 11:49 AM

Hi Ashraf,

In order to validate the DatePicker in the Grid I would suggest you to create a custom rule for it. Below you will find an example of how the Validator could be extended:

 

 $.extend(true, kendo.ui.validator, {
            rules: { // custom rules
              datevalidation: function (input) {
                //check if it is the OrderDate field
                if (input.is("[name=OrderDate]") && input.val()) {
                  var currentDate = new Date()
                  var isNewer = new Date($(input).val()) > currentDate;         
                  return isNewer;
                }
                return true;
              }
            },
            messages: {
              datevalidation: "The selected day could not be in the past"
            }
          });

 

You could also subscribe to the Grid cellClose event. In the event handler, you could get a reference to the DatePicker. Then, you could bind change event handler to the DatePicker and change the value of the widget if needed:

 

 
          $("#grid").kendoGrid({
            edit:  function(e) {             
              $('#OrderDate').data('kendoDatePicker').bind('change', datePickerChange)
            },
           .....
          })

 

 

 function datePickerChange(e){
          	 var value = this.value();
                var current = new Date();
                if(value < current){
                  $('#OrderDate').data('kendoDatePicker').value(current)
                }
          }

 

Here is a Dojo example where this is demonstrated. 

Regards,
Neli
Progress Telerik

Тhe web is about to get a bit better! 

The Progress Hack-For-Good Challenge has started. Learn how to enter and make the web a worthier place: https://progress-worthyweb.devpost.com.

0
Ashraf
Top achievements
Rank 1
Iron
answered on 26 Apr 2021, 03:59 PM

OK I am trying to do a simple date format validation using the kendo ui validator function in the method you recommended - and if I attempt to input a date even in valid format, it gets stuck in a recursive loop. Can you please help? Dojo link below - Again apologies for the alerts :)

 

https://dojo.telerik.com/EcoMisoS

 

0
Ashraf
Top achievements
Rank 1
Iron
answered on 26 Apr 2021, 04:49 PM

Getting the below error as well in the console when I try

 

 

0
Neli
Telerik team
answered on 28 Apr 2021, 08:29 AM

Hi Ashraf,

I will need a little bit more time to review the provided sample. I will get back to you once I have more information to share.
Thank you very much for your patience.

Regards,
Neli
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

1
Neli
Telerik team
answered on 29 Apr 2021, 12:34 PM

Hello Ashraf,

Could you please wrap the implementation for extending the validator as in the example below:

(function ($, kendo) {
         $.extend(true, kendo.ui.validator, {
           ...
          });
       })

This should resolve the issue with the error described in the screenshot you have provided.

However, I would suggest you revise the implementation of the Grid change event handler. In the handler you are trying to trigger the change event as follows:

 e.items[0].shipDate.trigger("change");

As the ' e.items[0].shipDate' is not a reference to a widget another error is observed. In case you need to trigger a change event of a widget, you need first to get a reference to it. Below is an example:

$('[name="shipDate"]').data('kendoDatePicker').value(today);
$('[name="shipDate"]').data('kendoDatePicker').trigger("change");

Here you will find the modified Dojo example.

I hope you will find the provided information helpful.

Regards,
Neli
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Ashraf
Top achievements
Rank 1
Iron
commented on 30 Apr 2021, 04:56 AM

Thanks Neli that worked like a charm!!

One small issue though regarding date validation -
If I type in a date like "2021-04-03abcd" , it is an invalid date, but it does not throw a format error like I would expect...Rather it removes the "abcd" and moves on to the next cell....Is that a kendo limitation?
Ivan Danchev
Telerik team
commented on 03 May 2021, 02:27 PM

Removing characters entered after the valid date is the DatePicker's default behavior.
Tags
General Discussions
Asked by
Bart
Top achievements
Rank 1
Answers by
Bart
Top achievements
Rank 1
Georgi Krustev
Telerik team
Ashraf
Top achievements
Rank 1
Iron
Neli
Telerik team
Share this question
or