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

Kendo Validator - Focus on first invalid field

3 Answers 1296 Views
Validation
This is a migrated thread and some comments may be shown as answers.
Paul
Top achievements
Rank 1
Paul asked on 13 Jan 2017, 05:03 PM

Hi there,

When using kendo Validator - is there a configuration option to set the focus to the first invalid field?

With the current application I am working on there are several long forms - it would be beneficial if the browser scrolled to the invalid field.

I can see how to do this easily with jQuery validate - but I can't seem to see an obvious extension point to do this with kendo Validator?

Thanks,

Paul

3 Answers, 1 is accepted

Sort by
0
Eduardo Serra
Telerik team
answered on 13 Jan 2017, 07:41 PM
Hello Paul,

At the moment, there is no option in the Kendo UI Validator that allows for an automatic focus on the first invalid field. 

We can achieve the behavior by subscribing to the validate event which is triggered after the validation has been made, whether there were errors or not, and manually focus on the first input with the k-invalid class using jQuery's first selector.

I have prepared a sample for you in the Kendo UI Dojo; you can take a look at it here. The relevant section:

var validator = $("#ticketsForm").kendoValidator({
   validate: function(){
      $(".k-invalid:first").focus();
   }
}).data("kendoValidator")

I hope this helps!

Regards,
Eduardo Serra
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Nathan
Top achievements
Rank 1
answered on 01 May 2017, 04:30 PM

I notice this works on all the controls except the dropdown list.  Any solution for that?

 

Thanks,

Nathan

0
Eduardo Serra
Telerik team
answered on 02 May 2017, 02:57 PM
Hello Nathan,

The previous approach doesn't work for DropDownLists because they don't display a cursor like other inputs when focused. By adding a call to jQuery's click method on top of the focus one, we can make sure that if the first invalid input is a DropDownList, it will be expanded for the user to select an option.

I have modified the previous Kendo UI Dojo sample in order to reflect this change; take a look at it here. Notice how the DropDownList will be expanded if we click the Submit form button when the item selected is --Start Time--.

I hope this helps!

Regards,
Eduardo Serra
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Validation
Asked by
Paul
Top achievements
Rank 1
Answers by
Eduardo Serra
Telerik team
Nathan
Top achievements
Rank 1
Share this question
or