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.
Unfortunately, activation email could not send to your email. Please try again.

Giving first invalid control focus

Thread ID:





121789 Jan 26,2016 04:16 AM Jan 27,2016 07:38 AM JavaScript 1
Tags: ejGrid
Greg Gannicott
Asked On January 26, 2016 04:16 AM


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.


Prasanna Kumar Viswanathan [Syncfusion]
Replied On January 27, 2016 07:38 AM

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


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.