Question

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.

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:

<div class="errorWrap">
<div class="errorTop"><span></span></div>
<div class="errorContent">
    <span class="error">This is an error</span>
</div>
<div class="errorBottom"><span></span></div>
</div>

Here’s an example of a solution I tried, but I’m still pretty new to javascript.

 $('.error').before('<div class="errorWrap"><div class="errorTop"><span></span></div><div class="errorContent">');
 $('.error').after('</div><div class="errorBottom"><span></span></div></div>');

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.

Answer 1

I ended up fixing this problem on my own using jquery to create the div and it’s nesting on pageload, the divs are generated with an error class that gives display:none. A custom errorPlacement function nests the error in the correct div. Then I used a custom validator highlight function to remove the class that hides the element. Then I used the unhighlight function to re-add the class to re-hide the div.

$(function() {
    //Generate the elements and assign attributes
    var errorWrap = document.createElement('div');
    $(errorWrap).addClass('errorWrap hideError');
    var errorTop = document.createElement('div');
    $(errorTop).addClass('errorTop');
    var topSpan = document.createElement('span');
    var errorContent = document.createElement('div');
    $(errorContent).addClass('errorContent');
    var errorBottom = document.createElement('div');
    $(errorBottom).addClass('errorBottom');
    var bottomSpan = document.createElement('span');

    //Place the elements directly after each dd element
    $("dl > dd").append(errorWrap);
    $("div.errorWrap").append(errorTop)
        .append(errorContent)
        .append(errorBottom);
    $("div.errorTop").append(topSpan);
    $("div.errorBottom").append(bottomSpan);

    //Add custom validator defaults
    $.validator.setDefaults({
        errorPlacement: function(error, element) {
            $(element).nextAll('.errorWrap').children('.errorContent').append(error);
        },
        highlight: function(element) {
            $(element).nextAll('.errorWrap').removeClass('hideError');
        },
        unhighlight: function(element) {
            $(element).nextAll('.errorWrap').addClass('hideError');
        }
    });

}

Although I’m sure this could have been done more shorthand, I really like this technique because I didn’t have to update any of my pages that contained forms to get it to work. All of the nested divs are dynamically created by javascript, so I can include a global file to any page with forms and it will just work. Thanks for all who offered suggestions.