在jqGrid中显示特定于字段的验证错误消息(服务器端验证) [英] Displaying field specific validation error messages in jqGrid (server-side validation)

问题描述

我使用jqGrid 4.5.4进行数据编辑.用户输入已在服务器上验证.发生验证错误时，服务器将返回一个JSON对象，其中包含字段名称/错误消息对.

I use jqGrid 4.5.4 for data editing. The user input is validated on the server. When there are validation errors, the server returns a JSON object which contains field-name/error-message pairs.

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

I know how to display these messages at the top of the form with the errorTextFormat callback, but I'd like to show validation messages near fields that caused them, i.e. I want to achieve something similar to the following:

有办法吗?

推荐答案

我不得不使用jQuery来操纵jqGrid表单的HTML.

I had to use jQuery to manipulate the HTML of the jqGrid form.

jqGrid设置

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

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

jqGrid调用errorTextFormat回调以创建错误消息，该错误消息在发生错误时显示在表单顶部.回调返回错误消息.此外，我使用此回调突出显示了 表格.

jqGrid calls the errorTextFormat callback to create an error message that is displayed at the top of the form when an error occurs. The callback returns the error message. Additionally, I used this callback to highlight erroneous fields in the form.

当用户单击导航按钮(左右箭头)时，将调用onclickPgButtons回调. 当用户移至下一个/上一个记录时，此回调用于清除突出显示的字段.

The onclickPgButtons callback is called when the user clicks a navigation button (the left and right arrows). This callback is used to clear field highlighting when the user moves to the next/previous record.

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

The recreateForm:true is used to make sure that field highlighting disappears when you close the form.

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

屏幕截图

这篇关于在jqGrid中显示特定于字段的验证错误消息(服务器端验证)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！