Databases
StackOverflow2013
Postsdbo
POWrapping a jquery validate span.error with nested divs
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWrapping a jquery validate span.error with nested divs
    text
    copied!<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>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload