I'm using happy.js for form validation. When an error occurs, a span with the class "unhappyMessage" will be placed directly before the form element that did not pass validation. The html ends up looking something like this:

<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>

The <span>s don't show up until an error occurs. I would like to use css to somehow filter the error messages to the top of the parent, as if it were coded like this:

<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>

Note that I would like to make each .unhappyMessage appear on its own line as well. Is there a css-only way to do this?

Note: for those of you who are wondering, I want to use css only because I would have to do some reverse engineering in order to get this working with javascript, since it seems the only event I'm provided through happy.js is not the only time that error messages are created.

• html
• css

Css wont provide a solution for you. Look for another form validator if you have no easy access into the event delegation. Or look into the code to see if you can figure out a work around.

Edit:
looking at the happy.js page it provides a callback function for you to specify if you wish.

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

So pass a function that prepends all the error messages.