Kendo Validator - Focus on first invalid field

4 posts, 0 answers
  1. Paul
    Paul avatar
    33 posts
    Member since:
    Mar 2013

    Posted 13 Jan Link to this post

    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

  2. Eduardo Serra
    Admin
    Eduardo Serra avatar
    91 posts

    Posted 13 Jan Link to this post

    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.
  3. Nathan
    Nathan avatar
    1 posts
    Member since:
    Jan 2016

    Posted 01 May in reply to Eduardo Serra Link to this post

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

     

    Thanks,

    Nathan

  4. Eduardo Serra
    Admin
    Eduardo Serra avatar
    91 posts

    Posted 02 May Link to this post

    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.
Back to Top