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

Question

我正在使用 happy.js用于表单验证。当发生错误时，类为“unhappyMessage”的跨度将直接放置在未通过验证的表单元素之前。 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>在发生错误之前，s 不会出现。我想使用 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 不会为您提供解决方案。如果您无法轻松访问事件委托(delegate)，请寻找另一个表单验证器。或者查看代码，看看您是否可以找到解决方法。

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

unHappy (function): A callback that gets triggered when form submission is attempted but any fields fail validation.

因此传递一个在所有错误消息之前添加的函数。