0

我正在使用 jQuery 和 jQuery ValidationEngine 在发布之前进行一些表单验证。正在测试的字段之一是隐藏字段，这意味着验证消息会显示在屏幕外，以防出现错误。

我正在使用以下代码将消息锚定在页面的其他位置，但似乎无法让它在不同的浏览器中定位。FF 与 Chrome/IE。 

 <form id="myForm">
        <input type="text" id="field1" name="field2" class="validate[required]" data-errormessage-value-missing="You must select your from the dropdown list." data-prompt-position="topRight"/>
        <input type="hidden" class="validate[required]" name="eId" id="eId" size="50" data-errormessage-value-missing="You must select from the dropdown list." data-prompt-position="topRight"/>
        <input type="submit"/>
        <div id="errorMe"/>
 </form>

这是定位错误的javascript：

var er = document.getElementById('errorMe');
var eId = document.getElementById('eId');
var erLeft = er.offsetLeft; /* + 25 */
var erTop  = er.offsetTop; /* - 950 */
console.log('pre = ' + eId.getAttribute('data-prompt-position'));
eId.setAttribute('data-prompt-position','topRight:'+erLeft+','+erTop);
console.log('post = ' + eId.getAttribute('data-prompt-position'));

两组不同的结果，在 FF 中距离应出现的位置近 950 像素，在 Chrome/IE 中向下约 200 像素。我什至没有尝试过 Safari。

当这不起作用时，我还尝试使用以下方法获取左侧/顶部：

function getOffsetRect(elem) {
var box = elem.getBoundingClientRect();

var body = document.body;
var docElem = document.documentElement;

var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop;
var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft;

var clientTop = docElem.clientTop || body.clientTop || 0;
var clientLeft = docElem.clientLeft || body.clientLeft || 0;

var top  = box.top +  scrollTop - clientTop;
var left = box.left + scrollLeft - clientLeft;

return { top: Math.round(top), left: Math.round(left) }

}

但这导致了完全相同的值。

谢谢。

4

0 回答 0