Validation before submitting the Search form generated using filterGrid in JQGrid

I have a search form I generated using the filterGrid option in JqGrid. I want to add a JavaScript logic which is invoked before I submit the Search form. I have added a method which is invoked by the beforeSubmit property for the filterGrid. It goes into the method before submitting, but always submits the form regardless of the value returned. I would like the form to not submit if the javascript returns false.

Have any of you guys implemented anything like this before. Or is there any othe rbetter way to implement this. Any help on this will be really appreciated.

Code:

$("#search").filterGrid("#resultsGrid",
                        {gridModel:true,gridNames:true,enableSearch:true,
                         formtype:"vertical",buttonclass:"submitButton",
                         enableClear:true,beforeSearch:validateDate});

function validateDate(dateDiff) {
    if(daysDiff < 0){
        return [false,"Message"];
    }
    } // ??? (commented by Oleg)
    return [true,""];
}

Solution

There are at least three different ways how searching can be used: Toolbar Searching, Custom Searching which you use and Single field searching or Advanced Searching which share the same code. So one have currently three different implementations of close things.

Only Toolbar Searching has beforeSearch event handler which can return false to stop searching. In case of Custom Searching the value returned by the event handler beforeSearch will not used. Single field searching or Advanced Searching don't call any event handler before searching. In all cases for the searching will set searching filter and the jqGrid parameter search to true and then force grid reloading with the code like

$("#gridId").trigger("reloadGrid",[{page:1}]);

To be able to make any validations and stop reloading of the grid I see no simple way. So I suggest only following.

You can overwrite the standard reloadGrid event handler and chain it. The corresponding code con look like following:

var grid = $("#gridId");
var events = grid.data("events"); // read all events bound to 
var originalReloadGrid; // here we will save the original event handle
var skipRefresh = false; // this can be changed by owe validation function
// Verify that one reloadGrid event hanler is set. It is typical sitation
if (events && events.reloadGrid && events.reloadGrid.length === 1) {
    originalReloadGrid = events.reloadGrid[0].handler; // save old
    grid.unbind('reloadGrid');
    var newEvents = grid.data("events");
    grid.bind('reloadGrid', function(e,opts) {
        if (!skipRefresh && grid[0].p.search) {
            originalReloadGrid(e,opts);
        }
    });
}

Probably I will create later a demo which demonstrate this on an example and place the link to the demo here. Moreover I will try to suggest code changes to jqGrid so, that in all different implementations of searching will be possible to stop serching by returning false by beforeSearch event handle.

UPDATED: OK! I prepared a demo for you. In the demo I use no server components, so it will not really do searching, but you can see the results if the grid will be refreshed and goes to the page 1.

To test the demo you can do following:

type in the "Client" input field a text not starting with 'test' and click "search" button. You receive an alert which simulate the validation dialog.
type in the "Client" input field a text starting with 'test' like test1 and click "search" button. Now the grig will refreshed because the validation will be OK.