在jqGrid中显示特定于字段的验证错误消息（服务器端验证）

Question

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

我知道如何使用errorTextFormat回调在表单顶部显示这些消息，但是我想在导致它们的字段附近显示验证消息，即我希望实现类似于以下内容的操作：

有办法吗？

Answer 1

我不得不使用jQuery来操作jqGrid表单的HTML。

jqGrid设置

Edit对话选项：{errorTextFormat:errorTextFormatF, onclickPgButtons:cleanEditForm, recreateForm:true, ...}

Add对话选项：{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();
}

<强>截图