仅使用css将元素移动到容器顶部

我正在使用happy.js进行表单验证。发生错误时，具有“unhappyMessage”类的跨度将直接放置在未通过验证的表单元素之前。在HTML最终看起来是这样的：仅使用css将元素移动到容器顶部

<form id="myForm"> 
    <label for="text1">Label 1</label><br /> 
    <span id="text1_unhappy" class="unhappyMessage">Error message</span> 
    <input id="text1" type="text" /> 
    <br /> 
    <label for="text2">Label 2</label><br /> 
    <span id="text2_unhappy" class="unhappyMessage">Error message</span> 
    <input id="text2" type="text" /> 
</form>

，直到发生错误时，<span>■不要露面。我想用css来的错误信息莫名其妙地过滤到父的顶部，仿佛它进行编码是这样的：

<form id="myForm"> 
    <span id="text1_unhappy" class="unhappyMessage">Error message</span><br /> 
    <span id="text2_unhappy" class="unhappyMessage">Error message</span><br /> 
    <label for="text1">Label 1</label><br /> 
    <input id="text1" type="text" /> 
    <br /> 
    <label for="text2">Label 2</label><br /> 
    <input id="text2" type="text" /> 
</form>

注意，我想使每个.unhappyMessage出现在自己的行以及。有没有一种只有CSS的方法才能做到这一点？

注意：对于那些想知道的人，我只想使用css，因为我必须做一些逆向工程才能使用javascript工作，因为它似乎是我通过提供的唯一事件happy.js不是创建错误消息的唯一时间。

来源

2012-04-05 benekastah

Css不会为您提供解决方案。如果您无法轻松访问活动代表团，请查找其他表单验证程序。或者查看代码，看看能否找出解决办法。

编辑：
看着happy.js页面，它提供了一个回调函数供您指定是否需要。

不高兴（功能）：当表单提交尝试，但任何领域失败证明，确认被触发的回调。

因此，传递一个函数，该函数将prepends所有错误消息。

来源

2012-04-05 01:05:13

这就是我正在使用的回调。它似乎只在窗体实际提交时才被调用，这比编辑错误消息的频率低。 – benekastah 2012-04-05 01:17:20

该脚本相当短，只是使搜索错误的脚本的一部分也称为不愉快的回调。 – 2012-04-05 01:30:46

最后我只是决定为每个表单元素的'blur'事件注册回调。在那一点上，我发现了任何新的错误消息，并将它们移动到窗体顶部的单独容器中。 – benekastah 2012-04-05 01:39:55

仅使用css将元素移动到容器顶部

回答

相关问题