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

Question

我使用happy.js进行表单验证。当发生错误时，类"unhappyMessage“的span将直接放在未通过验证的form元素之前。html最终看起来如下所示：

<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提供的唯一事件并不是唯一一次创建错误消息。

Answer 1

Css不会为您提供解决方案。如果您无法轻松访问事件委托，请查找另一个表单验证器。或者查看代码，看看你是否能找出周围的工作。

编辑：

查看happy.js页面，它提供了一个回调函数，供您指定是否愿意。

unHappy (函数)：尝试表单提交时触发的回调，但任何字段都无法验证。

因此，传递一个在所有错误消息前面的函数。