Giving first invalid control focus

[Greg Gannicott]

Hi.

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.

Thanks.

[Prasanna Kumar Viswanathan]

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 () {

            $("#Grid").ejGrid({

                // 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) {

        validator.focusInvalid();

    };

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

Regards,
Prasanna Kumar N.S.V