Focus first invalid - custom editor template

[Simon]

Trying to set the focus to the first invalid field when the validation fires onClick of the Save button on a Custom Editor template. I found this reference https://www.telerik.com/forums/kendo-validator---focus-on-first-invalid-field which I've used on a standard form successfully but 

                validate: function () {
                    $(".k-invalid:first").focus(); // focus first invalid field
                }

 

doesn't seem to work with the Scheduler when using CustomEditorTemplate, Also tried:

                validate: function () {
                    $(".k-invalid-msg:first").focus(); // focus first invalid field
                }

to no avail. Is there a solution for this?

Thanks.

 

[Dimitar]

Hello Simon,

To make this work with the Scheduler's built-in Validator, you can subscribe to the Scheduler's edit event, where the Validator's instance can be retrieved. Then, by using the setOptions() method the Validator's options can be changed dynamically according to the requirements:

@(Html.Kendo().Scheduler<Kendo.Mvc.Examples.Models.Scheduler.TaskViewModel>()
  ...
  .Events(e =>
  {
      e.Edit("onSchedulerEdit");
  })
)

<script>
  function onSchedulerEdit(e) {
    var validator = e.container.data("kendoValidator");

    validator.setOptions({
      validate: function(){
        $(".k-invalid:first").focus();
       }
     });
  }
</script>

Regards,
Dimitar
Progress Telerik

[Simon]

I should have specified, there are a number of custom validations in our Edit form. Here's the code for our validation, it's inside document.ready. The validation works fine, just can't set the focus to first invalid properly.

    $(document).ready(function () {

        //place this code before the Scheduler init code, e.g. in header
        (function ($, kendo) {
            //Extending the Scheduler build in validator:
            $.extend(true, kendo.ui.validator, {
                rules: {
                    //// Add custom validation rule to validate category field
                    hasSelectedCategories: function (input, params) {
                        if (input.is("[name=Categories]")) {
                            //Get the MultiSelect instance
                            var ms = input.data("kendoMultiSelect");
                            if (ms.value().length === 0) {
                                return false;
                            }
                        }
                        return true;
                    },
                    hasSelectedCampuses: function (input, params) {

                        if (input.is("[name=Locations]")) {
                            //Get the MultiSelect instance
                            var ms = input.data("kendoMultiSelect");
                            if (ms.value().length === 0) {
                                return false;
                            }
                        }
                        return true;
                    },
                    alttextrequired: function (input, params) {
                        // if there is an image associated with the event then we check to make sure the alt text field is completed
                        if (input.is("[data-val-alttextrequired]") && input.val() == "") {
                            var imgFile = $("#ImagePath");
                            return imgFile.val().trim().length == 0;
                        }
                        return true;
                    },


                },
                messages: {
                    //custom rules messages
                    //category: function (input) {
                    //    // return the message text
                    //    return "Category is already reserved for this day.";
                    //},
                    hasSelectedCategories: "Please select at least one category.",
                    hasSelectedCampuses: "Please select at least one campus.",
                    alttextrequired: function (input) {
                        return input.attr("data-val-alttextrequired");
                    },
                },
                validate: function () {
                    $(".k-invalid:first").focus(); // focus first invalid field
                }

            });
        })(jQuery, kendo);
        //end of custom validation code
    });

 

[Veselin Tsvetanov]

Hi Simon,

Setting the validate event handler of the Validator in the edit event handler of the Scheduler should work properly event if you have extended the kendo.ui.validator. Therefore, I would suggest you to attach the event handler as per Dimiter's suggestion and test again:

@(Html.Kendo().Scheduler<Kendo.Mvc.Examples.Models.Scheduler.TaskViewModel>()
  ...
  .Events(e =>
  {
      e.Edit("onSchedulerEdit");
  })
)

<script>
  function onSchedulerEdit(e) {
    var validator = e.container.data("kendoValidator");

    validator.setOptions({
      validate: function(){
        $(".k-invalid:first").focus();
       }
     });
  }
</script>

Note, that specifying the validate handler while extending the Validator will not achieve the desired result:

(function ($, kendo) {
  //Extending the Scheduler build in validator:
  $.extend(true, kendo.ui.validator, {
.........
    validate: function () {
      debugger;
      $(".k-invalid:first").focus(); // focus first invalid field
    }
  });
})(jQuery, kendo);

Regards,
Veselin Tsvetanov
Progress Telerik

[Simon]

Ok this works great when it's a simple text field, is it possible to set focus on:

1) A Kendo Editor field

2) A multi-select field

Thanks.

[Simon]

Tried to attach item to previous post...

[Veselin Tsvetanov]

Hi Simon,

To set the focus on the MultiSelect widget, you will need to focus its input element:

$(".k-invalid:first").closest('.k-widget').find('input').focus();

To set the focus on an Editor widget, you could use its focus() method:

var widgetWrapper = $(".k-invalid:first").closest('.k-widget');
if (widgetWrapper.hasClass('k-editor')) {
    $(".k-invalid:first").data("kendoEditor").focus();
}

Regards,
Veselin Tsvetanov
Progress Telerik