Question

我正在使用happy.js进行表单验证。发生错误时，具有“unhappyMessage”类的span将直接放在未通过验证的表单元素之前。 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（function）：表单时触发的回调尝试提交，但任何字段都无法通过验证。

因此传递一个预先添加所有错误消息的函数。

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

1 个答案: