highlight error cell or input when validation fails in jqgrid

Question

I am using jqgrid inline editing with validation in grid using edit rules . i want to add class to highlight errors(eg: ui-state-error) for the input which fails in validation . i can set class to highlight error using this

jQuery('#'+grid_id).jqGrid('setCell',row_id,errfields[a],'','ui-state-error',{color: 'blue'});

But it is not working in jqgrid when inbuilt validation fails . How do i highlight the validation error triggered cell/input .

Oleg · Accepted Answer · 2011-06-06T10:35:59.483

The demo shows how the probelm can be solved:

enter image description here

In the demo the columns "Amount", "Tax" and "Total" will be validated with the following validation rule:

editrules:{required:true,number:true}

On any validation error the first input field where the validation failed dditional class "ui-state-error" will be added. It is the standard jQuery UI CSS class. Addionally I set focus to the input field.

For the implementation I overwride (chain) the default implementation of the methods $.jgrid.checkValues and $.jgrid.hideModal. Here is the corresponding code:

var grid = $("#list");
grid.jqGrid({
    // define all jqGrid options
});

var originalCheckValues = $.jgrid.checkValues,
    originalHideModal = $.jgrid.hideModal,
    iColWithError = 0;
$.jgrid.checkValues = function(val, valref,g, customobject, nam) {
    var tr,td,
        ret = originalCheckValues.call(this,val, valref,g, customobject, nam);
    if (!ret[0]) {
        tr = g.rows.namedItem(editingRowId);
        if (tr) {
            $(tr).children('td').children('input.editable[type="text"]').removeClass("ui-state-error");
            iColWithError = valref; // save to set later the focus
            //error_td_input_selector = 'tr#'+editingRowId+' > td:nth-child('+(valref+1)+') > input.editable[type="text"]:first';
            td = tr.cells[valref];
            if (td) {
                $(td).find('input.editable[type="text"]').addClass("ui-state-error");
            }
        }
    }
    return ret;
};
$.jgrid.hideModal = function (selector,o) {
    var input, oldOnClose, td,
        tr = grid[0].rows.namedItem(editingRowId);
    if (tr) {
        td = tr.cells[iColWithError];
        if (td) {
            input = $(td).children('input.editable[type="text"]:first');
            if (input.length > 0) {
                oldOnClose = o.onClose;
                o.onClose = function(s) {
                    if ($.isFunction(oldOnClose)) {
                        oldOnClose.call(s);
                    }
                    setTimeout(function(){
                        input.focus();
                    },100);
                };
            }
        }
    }
    originalHideModal.call(this,selector,o);
};

Thanks a lot .The ans is very helpful . do i need to repeat '$.jgrid.checkValues' and '$.jgrid.hideModal' functions in each grid , if i have more that two editable grid in a page . — Shermi, May 31 '11 at 04:52
@Shermi: The `$`, `$.jgrid` are global objects which belongs to the `window` object. So the full name of `$.jgrid.checkValues` and `$.jgrid.hideModal` is `window.$.jgrid.checkValues` and `window.$.jgrid.hideModal`. In other words the function `checkValues` and `hideModal` belong not the instance of the grid and thus should be reimplemented **only once**. — Oleg, May 31 '11 at 05:25
@Oleg: When using the above code for overriding the checkValues method I am getting "too much recursion" error on Firefox console for this line ret = originalCheckValues.call(this,val, valref,g, customobject, nam); — RRK, Mar 19 '13 at 23:38
@RRK: [The demo](http://www.ok-soft-gmbh.com/jqGrid/SimpleLocalGridWithInlineEditing.htm) which I posted don't have the described problem. So I suppose that there are problem in **your code**. For example you inserted the code which I suggested more as one times. — Oleg, Mar 20 '13 at 03:39
@Oleg: Thank you. I had inserted the above code outside the document.ready(); method and hence the error. After I placed the code inside the ready() method I no longer get the recursion error. In addition to highlighting the cell, i was able to add a qtip error message on the cell. I would now like to disable the popup dialog with the error message that jqgrid displays. Any ideas? — RRK, Mar 20 '13 at 16:52
I checked your other post on how to override jQuery.jgrid.info_dialog and was able to not display the popup. Thank you! — RRK, Mar 20 '13 at 17:40
Thanks @Oleg for the great work. You have been such a great help in the jqgrid forums. — Helen Araya, Dec 03 '15 at 18:11

score 0 · Answer 2 · edited Aug 02 '12 at 09:47

0

In my project, I combine to use jqgrid and jquery validation plugin to examine and highlight errors, to provide unified look and feel in the entire application. You can use rowId_columnName as id to find the editor (input, select, etc.), e.g. $('#1_name') for name column in row 1 and then use the jquery object to add a rules, e.g. $('#1_name').rules('add', {required:true}) to add a rule to enforce that the cell is required, then calling $('#1_name').valid() to force a validation pass when value is submitted, e.g. before calling jqgrid saveRow method. Open the link for the plugin to know more about rules method and valid method.

edited Aug 02 '12 at 09:47

Druid

6,423
4
41
56

answered Aug 02 '12 at 09:11

tedyyu

587
6
12

can you help me in this regard by having a look at [my question](http://stackoverflow.com/questions/13064210/how-to-use-jquery-validate-js-to-validate-cells-in-jqgrid#comment17744539_13064210) – faizanjehangir Oct 25 '12 at 09:08

highlight error cell or input when validation fails in jqgrid

2 Answers2

Linked