升级jQuery至3.6.1后ValidationEngine提示框位置异常求助

将jQuery从1.8.3升级到3.6.1，同时把ValidationEngine从2.6.2升级到3.0.0后，出现以下异常：

• 表单提交后，带有validate[required]标记或手动调用validationEngine('showPrompt')的输入框，验证提示框位置错误，显示在表单外部
• 使用Select2的字段，验证提示位置显示正常
• 表格行通过append()方法动态添加

手动调用验证提示的JS代码 #

if(descLength>82){
    $("#dtlDesc"+x).validationEngine('showPrompt', '<fmt:message key="function.JournalProcess.DescptTooLong"/>', '','topLeft', true);
    valid = false;
}else if(descLength<1){
    $("#dtlDesc"+x).validationEngine('showPrompt', '<fmt:message key="function.JournalProcess.FieldRequired"/>', '','topLeft', true);
    valid = false;
}

JSP表格结构 #

<table id="forms" class="jrTable">
    <tr>
        <th><fmt:message key="function.JournalProcess.SN"/></th>
        <th><fmt:message key="common.CreditDebit"/></th>
        <th><span><fmt:message key="function.JournalProcess.AccountBranch"/></span></th>
        <th><span><fmt:message key="function.CostCenterSetting.CostCenter"/></span></th>
        <th><span><fmt:message key="function.JournalProcess.Currency"/></span></th>
        <th><span><fmt:message key="function.JournalProcess.AccountId"/></span></th>
        <th><span><fmt:message key="function.JournalProcess.Payer"/></span></th>
        <th><span><fmt:message key="function.JournalProcess.Amount"/></span></th>
        <th><span><fmt:message key="function.JournalProcess.AmountLcy"/></span></th>
        <th><span><fmt:message key="function.JournalProcess.Description"/></span></th>
        <th><span><fmt:message key="function.AssetRegistration.VendorId"/></span></th>
        <th></th>
    </tr>
</table>

1. 修复ValidationEngine的定位逻辑（适配jQuery 3.x） #

jQuery 3.x对offset()、position()的处理有细微调整，ValidationEngine的提示框定位高度依赖这些方法。可以修改ValidationEngine源码中计算位置的逻辑，改用更稳定的getBoundingClientRect()：

// 替换原offset获取逻辑（以_showPrompt方法为例）
var elem = $(targetElement)[0];
var rect = elem.getBoundingClientRect();
var scrollTop = $(window).scrollTop();
var scrollLeft = $(window).scrollLeft();

// 根据topLeft定位需求计算坐标
var promptTop = rect.top + scrollTop - $(promptElement).outerHeight();
var promptLeft = rect.left + scrollLeft;

$(promptElement).css({
    top: promptTop + 'px',
    left: promptLeft + 'px'
});

2. 动态添加行后重新绑定ValidationEngine #

动态生成的元素需要重新初始化ValidationEngine监听，确保定位计算能找到正确的上下文：

// 动态添加表格行后执行
$("#forms").validationEngine('attach', {
    promptPosition: "topLeft"
});
// 或针对单个新输入框初始化
$("#dtlDesc"+x).validationEngine('attach');

3. 修正CSS定位上下文 #

验证提示框默认是绝对定位，需确保输入框的父容器设置相对定位，避免提示框相对于页面根元素偏移：

.jrTable tr, .jrTable td {
    position: relative;
}

4. 指定提示框的挂载容器 #

调用showPrompt时，手动指定提示框插入到目标输入框的父元素内，而非默认的body：

$("#dtlDesc"+x).validationEngine('showPrompt', 
    '<fmt:message key="function.JournalProcess.FieldRequired"/>', 
    '',
    'topLeft', 
    true,
    $("#dtlDesc"+x).parent() // 将提示框挂载到输入框的父td中
);

5. 排查ValidationEngine版本兼容性 #

查看ValidationEngine仓库的issues，确认3.0.0版本是否存在jQuery 3.x的定位bug，尝试使用社区维护的适配分支或更新补丁。

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