jquery - 在 jqGrid 中显示特定于字段的验证错误消息(服务器端验证)

Question

我使用jqGrid 4.5.4进行数据编辑。用户输入在服务器上进行验证。当出现验证错误时，服务器返回一个包含字段名称/错误消息对的 JSON 对象。

我知道如何使用 errorTextFormat 回调在表单顶部显示这些消息，但我想在导致这些消息的字段附近显示验证消息，即我想实现类似的效果到以下内容:

有办法吗？

Answer 1

我必须使用 jQuery 来操作 jqGrid 表单的 HTML。

jqGrid设置

编辑对话框选项:{errorTextFormat:errorTextFormatF, onclickPgButtons:cleanEditForm, recreateForm:true, ...}

添加对话框选项:{errorTextFormat:errorTextFormatF, recreateForm:true}

jqGrid 调用 errorTextFormat 回调来创建一条错误消息，当发生错误时该消息会显示在表单顶部。回调返回错误消息。此外，我使用此回调来突出显示中的错误字段表格。

当用户单击导航按钮(向左和向右箭头)时，将调用 onclickPgButtons 回调。此回调用于在用户移动到下一条/上一条记录时清除字段突出显示。

recreateForm:true 用于确保关闭表单时字段突出显示消失。

JavaScript

function errorTextFormatF(data) {

    // The JSON object that comes from the server contains an array of strings:
    // odd elements are field names, and even elements are error messages.
    // If your JSON has a different format, the code should be adjusted accordingly.

    var validationErrors = data.responseJSON.validationErrors;

    if(validationErrors != null) {
        for (var i = 0; i < validationErrors.length; i += 2) {
            var selector = ".DataTD #" + validationErrors[i];
            $(selector).after( "<img title='" + validationErrors[i+1] + "' class='jqgrid-error-icon' src='resources/img/emblem-important-2.png'></img>" );
        }
    }

    return "There are some errors in the entered data. Hover over the error icons for details.";
}

function cleanEditForm() {
    $(".jqgrid-error-icon").remove();
}

屏幕截图