jQuery Validation plugin with JQGrid?

Question

Has anyone successfully used the jQuery Validation plugin with JQGrid? I realize that JQGrid has its own validation scheme, but it's limited and a little clumsy; and I'd prefer to reuse the validation UI, language, and rules that I'm using with the rest of my forms.

Answer 1

Edit inline and Validations is possibile with this steps.

Write your function to highlight and unhilight your input box:

GridErrorHighlight = function(el, er, ev) {
    $(el)
        .addClass('ui-state-error')
    .parent()
        .addClass('ui-state-error');
}

GridErrorUnHighlight = function(el, er, ev) {
    $(el)
        .removeClass('ui-state-error')
    .parent()
       .removeClass('ui-state-error');
}

Extend jqgrid:

; (function($) {
    $.jgrid.extend({
        onErrorHighlight: GridErrorHighlight,
        onUnHighlight: GridErrorUnHighlight,
    });
})(jQuery);

Now is easy for jQuery validation plugin use your custom functions. Is only necessary to create this options and initialize validation plugin:

var table = $('#tableid').jqGrid({});

var validateOpt = {
        meta: "validate",
        highlight: table.onErrorHighlight,
        unhighlight: table.onUnHighlight
    };

$(document).ready(function() {
    $('#formId').validate(val);
});

Now is easy to set validator for single input cell. We use jqGrid EditOptions into Model to add custom class for validation:

"editoptions":{"class":" {validate: { range:[0,1] } }"}

that's all!

Answer 2

I am using xVal (ASP.NET MVC) with jQuery Validation. Do you know how i'd create the rule through xVal, instead of adding it to jQuery Validation directly?

Cheers.