Free jqGrid最新版本：表单文本框onchange显示自定义提示问题

我来帮你搞定这个问题——要在onchange事件里实现类似afterSubmit的自定义提示效果，其实可以利用Free jqGrid自带的错误提示机制，或者手动在字段附近添加提示信息，这里有两种实用的方案：

方案一：在文本框旁显示 inline 错误提示 #

这种方式和jqGrid默认的字段错误提示风格一致，用户能直观看到哪个字段有问题：

{ 
    name: 'id', 
    index: 'id', 
    width: 60, 
    sorttype: "text", 
    editable: true, 
    align: "right", 
    editrules: { required: true }, 
    editoptions: { 
        dataEvents: [ 
            { 
                type: 'change', 
                fn: function (e) { 
                    const $input = $(this);
                    const inputVal = $input.val();
                    // 先清除之前的错误提示和样式，避免重复显示
                    $input.closest(".DataTD").find(".error").remove();
                    $input.removeClass("ui-state-error");
                    
                    $.ajax({ 
                        url: '@Url.Action("Verify", "Home")', 
                        data: { id: inputVal }, // 用对象传参更规范，避免特殊字符问题
                        type: "GET", 
                        success: function (data){ 
                            if(data === '') { // 验证不通过的情况
                                // 创建错误提示元素，样式和jqGrid默认错误保持一致
                                const errorMsg = $("<span class='error' style='color:red;margin-left:8px;'>自定义提示信息</span>");
                                // 把提示插入到文本框所在的单元格里
                                $input.closest(".DataTD").append(errorMsg);
                                // 给输入框加上错误样式，和jqGrid默认验证的视觉效果统一
                                $input.addClass("ui-state-error");
                            }
                        }, 
                        error: function () { 
                            // AJAX请求失败时的提示
                            const errorMsg = $("<span class='error' style='color:red;margin-left:8px;'>验证请求失败，请稍后重试</span>");
                            $input.closest(".DataTD").append(errorMsg);
                            $input.addClass("ui-state-error");
                        } 
                    }); 
                } 
            } 
        ]
    } 
}

方案二：弹出标准的jqGrid提示对话框 #

如果你想要和afterSubmit一样的弹出式提示，可以用jqGrid内置的$.jgrid.info_dialog方法，它会弹出一个和jqGrid风格统一的对话框：

{ 
    name: 'id', 
    index: 'id', 
    width: 60, 
    sorttype: "text", 
    editable: true, 
    align: "right", 
    editrules: { required: true }, 
    editoptions: { 
        dataEvents: [ 
            { 
                type: 'change', 
                fn: function (e) { 
                    const $input = $(this);
                    const inputVal = $input.val();
                    
                    $.ajax({ 
                        url: '@Url.Action("Verify", "Home")', 
                        data: { id: inputVal },
                        type: "GET", 
                        success: function (data){ 
                            if(data === '') { 
                                // 弹出jqGrid标准提示框
                                $.jgrid.info_dialog(
                                    "验证失败", // 标题
                                    "自定义提示信息", // 提示内容
                                    $.jgrid.edit.bClose, // 关闭按钮
                                    { width: 320 } // 对话框宽度
                                );
                                // 同时标记输入框为错误状态
                                $input.addClass("ui-state-error");
                            } else {
                                $input.removeClass("ui-state-error");
                            }
                        }, 
                        error: function () { 
                            $.jgrid.info_dialog(
                                "请求错误", 
                                "验证请求失败，请稍后重试", 
                                $.jgrid.edit.bClose
                            );
                            $input.addClass("ui-state-error");
                        } 
                    }); 
                } 
            } 
        ]
    } 
}

小提示 #

• 每次触发change事件时记得先清除之前的错误提示和样式，不然会出现多条提示叠加的情况
• 用对象形式传参{ id: inputVal }比字符串拼接更安全，能避免特殊字符（比如空格、&等）导致的参数解析错误
• 如果需要和表单提交的验证逻辑联动，可以在后续提交时检查字段是否有ui-state-error类，阻止无效提交

内容的提问来源于stack exchange，提问作者aman