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

Question

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

当显示“Origin not exists”消息时，“Destination”文本框会向下移动一点。如何在显示错误消息时阻止“目标”文本框移动？我更喜欢用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

为了让事情可以预测，请确保父页面<td>在页面呈现时具有足够的高度（应用一些高度样式）。我还指定了输入字段的高度，并给出了错误div高度。调整间距，直到没有任何变化。