用嵌套div包装jquery validate span.error

Heyo。这是我的第一个堆栈溢出帖子，因为我很难过，并且找不到很多人试图完成同样的事情。我试着用jquery .before（），.after（）和.wrap（）来解决这个问题。我最初在使用css：之前和之后：在伪元素之后，但因为这对于传统浏览器不起作用，所以我决定使用jquery。用嵌套div包装jquery validate span.error

我已经有几个页面上有几个表单，验证工作。错误消息的长度不同。我们在默认的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。但它只是坐在那里，没有任何功能被调用。所以我想象，因为代码不是重新执行，它只是不显示。有没有适当的函数来包装它？我敢肯定，我只是没有从正确的方向来攻击。任何帮助是超级赞赏。

来源

2012-01-26 Eric Westbrook

当你调用你的函数或试图应用样式时，你的错误div是否存在于dom中？ –

如果任何现有的“错误”类在初始加载时都是一次性事件，那么您需要将它包装在jQuery的.ready（）函数中。如果页面上的事件触发此事件，则需要额外的事件处理程序。 –

不，我想实际动态创建并删除包含错误跨度的元素。类似于创建错误跨度的方式。 –

我最终修复了这个问题，我自己使用jquery创建div，它在页面加载上嵌套，div生成了一个显示错误的类：没有。自定义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动态创建的，所以我可以将一个全局文件包含到任何带有表单的页面中，并且它可以正常工作。感谢所有提供建议的人。

来源

2012-02-15 00:17:50

插件“之前”和“之后”不采取html作为字符串。你不能在一个div中启动div，并在另一个中关闭它。

要么你把你目前的HTML和生成你追加，你想一个新的HTML字符串或使用“包装”插件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>");

来源

2012-01-26 00:40:24 Luke

谢谢。但我应该在哪里放置这个？显示错误后，我立即假设在验证功能结束时？ –

如果你想显示焦点后一个错误的div出输入的，那么你必须使用HTML它创建/包卢克说，然后你必须将其追加在加时赛的DOM期运用

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

但也有其他方法可以插入像append/appendTo等新的元素，

来源

2012-01-26 01:08:53

用嵌套div包装jquery validate span.error

回答

相关问题