jQuery驗證插件 - 獲得兩個包裝錯誤標籤

我有一些麻煩讓我的JQuery Validation到我想要的地方。我的錯誤顯示在帶箭頭的側邊框中。這可以通過一個「包裝器」來實現。jQuery驗證插件 - 獲得兩個包裝錯誤標籤

$('#loginform').validate({ 
    errorPlacement: function(label, element) { 
     label.addClass('arrow'); 
     label.insertAfter(element); 
    }, 
    wrapper: 'span' 
});

的問題是，不幸的是我身邊有我的輸入字段一個盒子，所以錯誤應該被放置在該邊界的那個盒子。要做到這一點，我需要兩個包裝。所以，我的錯誤應該是這樣的：

<span class='errorContainer'> 
    <span class='arrow'> 
     <span class='error'>This is the actual error message.</span> 
    </span> 
</span>

當前的代碼讓我只有這個：

<span class='arrow'> 
    <span class='error'>This is the actual error message.</span> 
</span>

來源

2013-02-23 jdepypere

你可以像'$（''）.insertAfter（element）.append（label）'; – 2013-02-23 11:55:16

您可以使用

errorPlacement: function(label, element) { 
    $('<span class="errorContainer"><span class="arrow"></span></span>').insertAfter(element).find('.arrow').append(label) 
}

演示：Fiddle

來源

2013-02-23 12:02:08

太簡單了，我有很多努力來解決這個問題......謝謝！ – jdepypere 2013-02-23 12:08:38

沒有什麼接受的答案是錯誤的，但我想展示一種更有效的方式來實現相同的期望DOM結構cture。

而不是插入一個空的容器，找到內部元素，然後附加錯誤...下面是不那麼冗長和更直接;它只是用所需的容器包裝標籤。

errorPlacement: function (error, element) { 
    error.insertAfter(element) 
    .wrap('<span class="errorContainer"><span class="arrow"></span></span>'); 
},

這有服用該插件的默認errorPlacement回調優勢...

error.insertAfter(element)

...然後只需鏈接的jQuery .wrap()方法到底...

.wrap('<span class="errorContainer"><span class="arrow"></span></span>')

工作演示：http://jsfiddle.net/2ZaLB/

來源

2013-02-23 16:37:51 Sparky

謝謝，我總是很高興得到關於這樣的東西的額外信息。我不習慣所有的jQuery功能，所以額外的信息總是很方便！ – jdepypere 2013-02-23 17:12:43

jQuery驗證插件 - 獲得兩個包裝錯誤標籤

回答

相關問題