javascript - 显示验证消息而不移动页面中的其他元素

Question

我有两个文本框作为必填字段，一个在另一个之上。如何在文本框下方显示“必填字段”消息而不导致下方元素向下移动？

当显示“来源不存在”消息时，“目的地”文本框会向下移动一点。显示错误消息时如何防止“目标”文本框移动？我宁愿用 Javascript 来做这件事。

这是我尝试过的，我只是不知道该怎么做。validateStop() 方法创建一个“div”元素并在其中插入错误消息。

function validateStop(stopNode){
        var inputStop = $.trim(stopNode.value);
        createSiblingNodeFor(stopNode);//creates div node to display error msg. 
        if(isEmpty(inputStop)){
            showInputRequiredMsg(stopNode.id, stopNode); 
            return false;
        }
}


<td>
    <input id="origin" type="text" onblur="validateStop(this)" value="" name="origin">
    <div id="originvalidationResult" style="color: red;">origin is required.</div>
</td>

编辑：

我在 div 元素中添加了“position:absolute”，这就是在 IE8 中发生的事情，尽管它似乎在 Firefox 中工作。我们需要使用IE8：

In IE8:

In Firefox: 

Answer 1

To have things go predictably, make sure that the parent <td> has enough height (apply some height style ) when the page renders. I'd also specify height of the input field and give the error div height as well. Tweak the spacing until nothing shifts.