Обтекание jquery validate span.error с вложенными div

Question

Heyo.Это мой первый пост переполнения стека, потому что я в тупике и не могу найти много людей, которые пытаются сделать то же самое.Я попытался использовать jquery .before (), .after () и .wrap () для решения этой проблемы.Первоначально я использовал псевдоэлементы css: before и: after, но так как это не сработает для устаревших браузеров, я решил использовать jquery.

У меня уже есть несколько форм на нескольких страницах с проверкой работоспособности,Сообщения об ошибках различаются по длине.Мы использовали статическое фоновое изображение одного размера в элементе span по умолчанию, поэтому при более длинных сообщениях об ошибках содержимое истекало.Я построил гибкий ряд закругленных углов для вложенных элементов div, чтобы позволить блоку ошибок динамически увеличиваться или уменьшаться.HTML-код, который я хочу вывести:

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

Вот пример решения, которое я пробовал, но я все еще довольно плохо знаком с 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>');

Исправьте меня, если я 'Я не прав, но я думаю, что у меня есть правильная идея с JQuery.Но это просто вид того, что вы сидите там, а не в какой-либо вызываемой функции.Итак, я представляю, что, поскольку код не выполняется повторно, он просто не отображается.Есть ли соответствующая функция, чтобы обернуть это?Я уверен, что я просто не атакую ​​это с правильного направления.Любая помощь очень ценится.

Answer 1

Если вы хотите показать ошибку div после фокуса вне ввода, вы должны создать его, используя html / wrap, как сказал Люк, и затем вы должны добавить его в dom, используя

$('.errorWrap').insertAfter('.focusedElement');

Но для вставки нового элемента доступны другие методы, такие как append / appendTo и т. Д.,

Answer 2

Я решил исправить эту проблему самостоятельно, используя jquery для создания div, и он вложен в pageload, div генерируются с классом ошибок, который дает display: none.Пользовательская функция errorPlacement вкладывает ошибку в правильный div.Затем я использовал пользовательскую функцию выделения валидатора, чтобы удалить класс, который скрывает элемент.Затем я использовал функцию unhighlight для повторного добавления класса для повторного скрытия 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');
        }
    });

}

Хотя я уверен, что это можно было сделать более кратко, мне действительно нравится этот метод, потому что я неМне нужно обновить любую из моих страниц, которые содержали формы, чтобы заставить ее работать.Все вложенные элементы div динамически создаются с помощью javascript, поэтому я могу добавить глобальный файл на любую страницу с формами, и она будет работать.Спасибо всем, кто предложил свои предложения.

Answer 3

плагины «до» и «после» не принимают HTML в качестве строки.вы не можете запустить div в одном и закрыть его в другом.

Либо вы берете текущий html и генерируете новую html-строку, которую добавляете, где хотите, либо используете плагин wrap http://api.jquery.com/wrap/

Использование чистого HTML

$(".error").html("<div class='beforeContent'>" + $(".error").html() + "</div>");

Использование переноса (http://api.jquery.com/wrap/)

$(".error").wrap("<div class='beforeAndAfter'></div>");