AJAX返回后给表单元素追加错误消息高亮时insertAfter方法报错

报错根因 #

1. 你创建的errorObj是JS内置的Error类型实例，不是jQuery DOM对象，本身不存在insertAfter方法，这是报错的直接原因。
2. 表单项选择逻辑错误：$("#chngPwdForm").filter("#" + elemName) 是对form元素本身做筛选，不可能匹配到form内部的表单项，你需要用find方法查找子元素。
3. 缺少旧错误清理逻辑：如果多次提交，会重复追加错误提示。

修复后的代码 #

你只需要替换.done回调内的if (!data.status)分支的代码即可，修改后如下：

.done (function(data, textStatus, jqXHR) {
    // 先清理之前的错误状态和提示
    $("#chngPwdForm .form-group").removeClass("has-error");
    $("#chngPwdForm label.error").remove();
    
    if (!data.status) {
        var Msg = "密码未修改，密码变更操作失败。";
        var element;
        $.each(data.Msg, function(elemName, errMsg) {
            // 正确获取表单项
            element = $("#chngPwdForm").find("#" + elemName);
            if (element.length) {
                // 高亮表单项所在容器
                element.closest(".form-group").addClass("has-error");
                // 创建和jQuery validate样式一致的错误提示元素
                $('<label class="error">'+ errMsg +'</label>').insertAfter(element);
            }
        });
    } else {
        // 只有成功的时候才赋值成功提示，避免失败也显示成功文本
        Msg = "密码修改成功，请点击登录按钮继续操作。";
    }
    $('#chngPwdForm div[id="errorTxt"]').text(Msg).show();
})

额外说明 #

• 你之前把成功提示的Msg赋值放在了AJAX请求前，会导致请求失败的时候仍然显示成功提示的问题，上面的代码也同步修复了这个逻辑问题。
• 错误提示的class用error是和jQuery validate默认的错误样式保持一致，如果你自己有自定义的错误样式类，替换成对应的类名即可。

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