CSS佈局形式與jQuery驗證錯誤

Question

我有我的CSS樣式正確對齊文本框的窗體。我正在使用jQuery Validation。我在提交表單時遇到了佈局問題，因爲驗證過程中產生了錯誤。我的CSS如下：

#form p label { 
    padding-top: 5px; 
    display: block; 
    width: 100px; 
    float: left; 
} 

我知道float: left;是造成這個問題。我正在尋找在每個文本框旁邊顯示的錯誤，而不更改佈局。 jQuery的驗證錯誤類是.errors。我做了一個jsFiddle重新創建我的問題。

Answer 1

您爲label ELEM CSS因爲它會覆蓋頁面上的所有label元素，所以它會覆蓋插件使用的label元素以顯示錶單錯誤。

簡單地增加這個CSS將設置僅用於插件恢復爲默認值不會影響您的任何其他label元素的label元素。

#form p label.error { 
    float: none; 
    display: inline; 
} 

DEMO：http://jsfiddle.net/4Wspp/

---

編輯：

我的回答可以解決你的問題，但如果你想利用jQuery的更多的優勢，你應該看看另一種選擇使用jQuery插件提供精美的工具提示。

DEMO：http://jsfiddle.net/kyK4G/

從這個蘇答案：https://stackoverflow.com/a/14741689/594235

Answer 2

你的錯誤元素上使用絕對定位將讓您的形式保持不變上的錯誤。但是，這將需要額外的標記來維護您的表單顯示。在這個例子中，<span class="item"></span>一個包裝中加入到您的輸入字段爲錯誤元件提供位置邊界。

注意，對於label元素設置的屬性會影響您的錯誤標籤，以及。

爲一個例子見http://jsfiddle.net/K5fR8/3/。

全部標記如下：

HTML

<form id="form" action="" method="post"> 
<p> 
    <label for="email">Email:</label> 
    <span class="item"> 
     <input type="text" name="email" id="email" placeholder="Email" value="" class="required" /> 
    </span> 
</p> 
<p> 
    <label for="password">Password:</label> 
    <span class="item"> 
     <input type="password" name="password" id="password" placeholder="Password" value="" class="required" /> 
    </span> 
</p> 
<p> 
    <label for=""></label> 
    <input type="submit" name="submit" id="submit" value="Log In" class="button" /> 
</p> 

CSS

#form p label { 
    padding-top: 5px; 
    display: block; 
    width: 100px; 
    float: left; 
} 

#form p .item { 
    position: relative; 
} 

#form p .item label.error { 
    float: none; 
    position: absolute; 
    top: 0; 
    right: -100px; /* Offset by width set on label element */ 
    padding: 0px; 
}