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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Giving first invalid control focus

Thread ID:





121789 Jan 26,2016 09:16 AM UTC Jan 27,2016 12:38 PM UTC JavaScript 1
Tags: ejGrid
Greg Gannicott
Asked On January 26, 2016 09:16 AM UTC


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 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


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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon 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.Close Icon