We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Giving first invalid control focus


Given a situation where a grid contains several input controls, and one or more fail validation on Save, would it be possible to give the first of the invalid controls focus?

This would make the experience for the user who's correcting the problem slightly smoother.


1 Reply

PK Prasanna Kumar Viswanathan Syncfusion Team January 27, 2016 12:38 PM UTC

Hi Greg,

Thanks for contacting Syncfusion support.

Your requirement has been achieved by the invalidHandler event. This event triggers when validation get failed and we can get the validator in the arguments. Using focusInvalid method, we focus the textboxes.

Please find the code example and sample:

$(function () {


                // the datasource "window.gridData" is referred from jsondata.min.js

                dataSource: window.gridData,

                allowPaging: true,

                toolbarClick: "toolbar",

                queryCellInfo : "update",

                editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true },

                toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Add, ej.Grid.ToolBarItems.Edit, ej.Grid.ToolBarItems.Delete, ej.Grid.ToolBarItems.Update, ej.Grid.ToolBarItems.Cancel] },

                columns: [

                        { field: "OrderID", isPrimaryKey: true, headerText: "Order ID", textAlign: ej.TextAlign.Right, validationRules: { required: true, number: true }, width: 90 },

                        { field: "CustomerID", headerText: 'Customer ID', validationRules: { required: true, minlength: 3 }, width: 90 },

                        { field: "EmployeeID", headerText: 'Employee ID', editType: ej.Grid.EditingType.Dropdown, textAlign: ej.TextAlign.Right, width: 80, validationRules: { number: true, range: [0, 1000] } },

                        { field: "Freight", headerText: 'Freight', textAlign: ej.TextAlign.Right, editType: ej.Grid.EditingType.Numeric, editParams: { decimalPlaces: 2 }, validationRules: { range: [0, 1000] }, width: 80, format: "{0:C}" },

                        { field: "ShipName", headerText: 'Ship Name', width: 150 },

                        { field: "ShipCountry", headerText: 'Ship Country', editType: ej.Grid.EditingType.Dropdown, width: 90 }




    $.validator.defaults.invalidHandler = function (form,validator) {



Sample: http://jsplayground.syncfusion.com/3vrmmnbz

Prasanna Kumar N.S.V

Live Chat Icon For mobile
Up arrow icon