0

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

4

1 回答 1

0

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

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

unHappy（函数）：尝试提交表单但任何字段验证失败时触发的回调。

因此，传递一个预先设置所有错误消息的函数。

于 2012-04-05T01:05:13.853 回答