title: Wrapping a jquery validate span.error with nested divs
body: <p>Heyo. This is my first stack overflow post because I am stumped and not finding many people who are trying to accomplish the same thing. I've tried using jquery .before(), .after(), and .wrap() to resolve this. I was initially using css :before and :after pseudo-elements, but as that won't work for legacy browsers, I've decided to use jquery.</p>
  
  <p>I already have several forms on several pages with validation working. The error messages vary in length. We were using a static, one size background image on the default span element, so content was bleeding out on longer error messages. I built a flexible rounded corner series of nested divs to allow the error box to grow or shrink dynamically. The html I want to output is:</p>
  
  <pre><code>&lt;div class="errorWrap"&gt;
  &lt;div class="errorTop"&gt;&lt;span&gt;&lt;/span&gt;&lt;/div&gt;
  &lt;div class="errorContent"&gt;
      &lt;span class="error"&gt;This is an error&lt;/span&gt;
  &lt;/div&gt;
  &lt;div class="errorBottom"&gt;&lt;span&gt;&lt;/span&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here's an example of a solution I tried, but I'm still pretty new to javascript.</p>
  
  <pre><code> $('.error').before('&lt;div class="errorWrap"&gt;&lt;div class="errorTop"&gt;&lt;span&gt;&lt;/span&gt;&lt;/div&gt;&lt;div class="errorContent"&gt;');
   $('.error').after('&lt;/div&gt;&lt;div class="errorBottom"&gt;&lt;span&gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;');
  </code></pre>
  
  <p>Correct me if I'm wrong, but I think that I have the right idea with the jquery. But it's just kind of sitting there, not in any function being called. So I imagine that since the code isn't re-executing, it just doesn't show up. Is there an appropriate function to wrap this in? I'm certain I'm just not attacking this from the right direction. Any help is super appreciated.</p>