jQuery驗證插件添加聯機樣式錯誤？

我有這個here一個非常基本的例子。要複製，請嘗試提交表單，然後它會提醒您該字段是必需的。然後填寫一些文字，然後刪除所有文字。您將看到錯誤消息跳轉到下一行。jQuery驗證插件添加聯機樣式錯誤？

使用Firebug進行檢查後，它顯示該插件正在內聯元素上添加style="display: block"。如何防止在元素上生成任何內聯樣式？我知道你可以修改.error類的風格，但是它應用的內聯風格顯然勝過了應用類。

2010-11-13 aherrick

通過JavaScript添加style="display: block"是在運行時動態顯示和隱藏元素的唯一方法。這不像大多數內聯樣式那麼糟糕。在正常jQuery中調用$("#myElement").show()時會發生同樣的情況。

編輯：跟進獲取你想要的行爲，我去編輯你的jsBin;如果我做得對，新版本應該是here。

很顯然，這個問題是的this.defaultShowErrors()的行爲是使用jQuery的.show()方法錯誤列表，在這種情況下（如上面和在評論中討論）將設置一個內聯display: block風格上。既然我們要display: inline，我們需要修改showErrors像這樣：

showErrors: function (errorMap, errorList) { 
    this.defaultShowErrors(); 
    $.each(errorList, function (i, error) { 
     $(error.element).css("display", "inline"); 
    }); 
}

這樣，每當錯誤是隱藏的，則再次顯示，我們的自定義功能showErrors將觸發。他們會被this.defaultShowErrors()暫時設置爲display: block，但是我們會修復該問題並將它們設置爲display: inline。

來源

2010-11-13 21:00:17 Domenic

這是有道理的，但問題是顯示器是塊，所以它把它放到第二行。我希望它保持在文本框的右側。我怎樣才能做到這一點？如果它設置顯示：內聯，將不會有問題... – aherrick 2010-11-13 21:13:10

這有點艱難...這是我遇到的一個問題。我認爲，如果你最初將它們設置爲「display：inline」，例如在你的CSS中，然後調用jQuery'hide（）'，未來對'show（）'的調用將使用'inline'。不是100％確定，但... – Domenic 2010-11-13 21:18:21

調用隱藏什麼？我想我明白你在做什麼，但我一直無法得到它。你能用我發佈的JS Bin例子複製它嗎？ – aherrick 2010-11-13 21:31:04

對於其他人，我使用下面的「hack」來解決這個問題。如果有更清潔的方法，請告訴我。

http://jsbin.com/agexa3/10/

來源

2010-11-13 22:55:25 aherrick

您可以使用

showErrors: function (errorMap, errorList) { 
       this.defaultShowErrors(); 
       $.each(errorList, function (i, error) { 
        $(error.element).next('span.error').css("display", "inline"); 
       }); 
      }

來源

2012-08-01 17:48:49 doladosu

這是一個很好的解決方案（感謝Damilare和Domenic）

showErrors: function (errorMap, errorList) { 
    this.defaultShowErrors(); 
    $.each(errorList, function (i, error) { 
      $(error.element).next('span.error').css("display", "inline"); 
    }); 
}

然而，如果無法工作，檢查結構。 $（error.element）是有錯誤的控件。「.next」是它的下一個兄弟姐妹。在我的情況下，這個兄弟姐妹是一個，它的第一個孩子是span.error標籤。使用例如這個表示法：

$(error.element).next().children(':first-child').css("display", "inline");

來源

2013-06-11 12:38:51 Mark

jQuery驗證插件添加聯機樣式錯誤？

回答

相關問題