带有 JQGrid 的 jQuery 验证插件？

Question

有人成功使用jQuery Validation plugin与 JQGrid ？我意识到 JQGrid 有自己的验证方案，但它是有限的并且有点笨拙；我更愿意重用我在其余表单中使用的验证 UI、语言和规则。

Answer 1

通过此步骤可以进行内联编辑和验证。

编写函数来突出显示和取消突出显示输入框:

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');
}

扩展jqgrid:

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

现在 jQuery 验证插件可以轻松使用您的自定义函数。只需要创建此选项并初始化验证插件:

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

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

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

现在可以轻松地为单个输入单元设置验证器。我们在模型中使用 jqGrid EditOptions 添加自定义类进行验证:

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

仅此而已!