CSS對齊問題使用jQuery驗證

Question

時，我有一個次要問題：

我目前正在編寫一個註冊表格，我決定測試一下jQuery的驗證。不幸的是，返回的錯誤信息遍佈整個地方。不知道它是一個CSS問題，但我一直在對準幾個小時，真的很感激一些幫助。

可以看出在上面的圖片我試圖讓「這個字段是必須的。」文本直接在文本字段下排列。

這是我使用至今代碼：

jQuery的

// sign up validation 
$(".signup").validate(); 

CSS

.myform { 
    width: 400px; 
    padding-top: 25px; 
    padding-left: 20px; 
} 
#stylized h1 { 
    font-size: 14px; 
    font-weight: bold; 
    margin-bottom: 8px; 
} 
#stylized p { 
    font-size: 11px; 
    color: #999; 
    margin-bottom: 20px; 
    border-bottom: solid 1px #b7ddf2; 
    padding-bottom: 10px; 
} 
#stylized label { 
    display: block; 
    font-weight: bold; 
    text-align: left; 
    width: 160px; 
    float: left; 
} 

#stylized label.error { 
    float: none; 
    font-size: 12px; 
    color: red; 
    margin-left: 1px; 
} 

#stylized .small { 
    color: #999; 
    display: block; 
    font-size: 11px; 
    font-weight: normal; 
    text-align: left; 
    width: 160px; 
} 
#stylized input { 
    float: left; 
    font-size: 16px; 
    padding: 4px 2px; 
    border: solid 1px #aacfe4; 
    width: 200px; 
    margin: 2px 0 20px 10px; 
} 
#stylized select { 
    float: left; 
    font-size: 16px; 
    padding: 4px 2px; 
    border: solid 1px #aacfe4; 
    width: 75px; 
    margin: 2px 0 20px 10px; 
} 
#stylized button { 
    clear: both; 
    margin-left: 169px; 
    margin-top: 10px; 
    cursor: pointer; 
    color: #42230b; 
    text-shadow: 1px 1px 0 #fff6b9; 
    border: 1px solid #db9c2e; 
    border-radius: 3px; 
    -moz-border-radius: 3px; 
    -webkit-border-radius: 3px; 
    background: #f7ce50; 
    background: -webkitkit-gradient(linear, bottom, top, from(#f1ac33), to(#fef673)); 
    background: -moz-linear-gradient(bottom, #f1ac33, #fef673); 
    font-size: 16px; 
    padding: 5px 20px; 
    font-weight: bold; 
} 
#stylized button:hover { 
    clear: both; 
    margin-left: 169px; 
    margin-top: 10px; 
    background: #edb954; 
    background: -webkitkit-gradient(linear, bottom, top, from(#dc9f35), to(#fed273)); 
    background: -moz-linear-gradient(bottom, #dc9f35, #fed273); 
    font-size: 16px; 
    padding: 5px 20px; 
    font-weight: bold; 
} 

HTML

<div id="stylized" class="myform" > 
    <form class="signup" method="post" action="#"> 
    <label>Username 
    <span class="small">Enter a username.</span> 
    </label> 
    <input type="text" name="name" id="name" class="required"/> 
    <label>Email 
    <span class="small">Enter a valid address.</span> 
    </label> 
    <input type="text" name="email" id="email" class="required"/> 
    <label>Password 
    <span class="small">Enter a secure password.</span> 
    </label> 
    <input type="password" name="password" id="password" class="required"/> 
    <label>Confirm Password 
    <span class="small">Enter your password again.</span> 
    </label> 
    <input type="password" name="password" id="password" class="required"/> 
    <label>Age 
    <span class="small">Select your age range.</span> 
    </label> 
    <select id="age" name="age" class="required"> 
    <option></option> 
    <option>0 - 17</option> 
    <option>18 - 25</option> 
    <option>26 - 40</option> 
    <option>40+</option> 
    </select>     
    <button type="submit">Sign up</button> 
    </form> 
</div> 

在此先感謝！

UPDATE

我使用這個插件：

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

Answer 1

更新你的樣式與...

#stylized label.error { 
    font-size: 12px; 
    color: red; 
    margin: -20px 0px 0px 170px; 
} 

Answer 2

您的問題不會出現任何的以上，html，css或驗證。從某種意義上說，它在佈局本身。

驗證是直接在輸入字段下添加它，就像它預期的一樣，但是由於輸入和標籤之間沒有區分，所以新的表格在標籤下開始。如果你改變了你的佈局，所以它被分成一個側面標記​​一個側面的輸入，並且這樣做就像一箇舊的學校桌布局，然後你的驗證應該按照你希望的方式工作。

您可以使用CSS爲驗證錯誤容器添加填充或邊距，並嘗試按這種方式推送，儘管這可能並不具有完整的期望效果，並且您的方法可能會等待不適用於所有瀏覽器

Answer 3

幾周前我也遇到了同樣的問題。輸入後，jQuery Validate插件立即插入錯誤消息。您的輸入具有20像素的底部邊距 - >消息的像素小於20像素。

解決方案：將輸入邊距設置爲0，將每個輸入字段放在div中，將div邊距設置爲輸入邊距的值。

編輯：加入請求的示例

電流CSS：

#stylized input { 
    float: left; 
    font-size: 16px; 
    padding: 4px 2px; 
    border: solid 1px #aacfe4; 
    width: 200px; 
    margin: 2px 0 20px 10px; 
} 

改性的CSS：

#stylized input { 
    float: left; 
    font-size: 16px; 
    padding: 4px 2px; 
    border: solid 1px #aacfe4; 
    width: 200px; 
    margin: 0px; 
} 

.inputContainer { 
    margin: 2px 0 20px 10px; 
} 

當前HTML

<label>Username 
<span class="small">Enter a username.</span> 
</label> 
<input type="text" name="name" id="name" class="required"/> 
<label>Email 
<span class="small">Enter a valid address.</span> 
</label> 
<input type="text" name="email" id="email" class="required"/> 

改性HTML

<label>Username 
<span class="small">Enter a username.</span> 
</label> 
<div class="inputContainer"> 
<input type="text" name="name" id="name" class="required"/> 
</div> 
<label>Email 
<span class="small">Enter a valid address.</span> 
</label> 
<div class="inputContainer"> 
<input type="text" name="email" id="email" class="required"/> 
</div> 

Answer 4

您需要對CSS和HTML進行一些更新。

下面是給出的CSS更新，我給的HTML完全。

上HTML更新是， 我已經放置在<input/>和<select>具有類「字段」的共同的造型和更好對準的<div>元素數量。

CSS UPDATE

#stylized label.error { 
    float: none; 
    clear: both; 
    font-size: 12px; 
    color: red; 
    margin-bottom: 10px; 
    margin-left: 10px; 
} 

.field{ 
    display: block; 
    width: auto; 
    height: auto; 
    float: left; 
} 

HTML

<div id="stylized" class="myform" > 
    <form class="signup" method="post" action="#"> 
    <label>Username 
    <span class="small">Enter a username.</span> 
    </label> 
    <div class="field"> 
     <input type="text" name="name" id="name" class="required"/> 
    </div> 
    <label>Email 
    <span class="small">Enter a valid address.</span> 
    </label> 
    <div class="field"> 
     <input type="text" name="email" id="email" class="required"/> 
    </div> 
    <label>Password 
    <span class="small">Enter a secure password.</span> 
    </label> 
    <div class="field"> 
     <input type="password" name="password" id="password" class="required"/> 
    </div> 
    <label>Confirm Password 
    <span class="small">Enter your password again.</span> 
    </label> 
    <div class="field"> 
     <input type="password" name="password" id="password" class="required"/> 
    </div> 
    <label>Age 
    <span class="small">Select your age range.</span> 
    </label> 
    <div class="field"> 
     <select id="age" name="age" class="required"> 
      <option></option> 
      <option>0 - 17</option> 
      <option>18 - 25</option> 
      <option>26 - 40</option> 
      <option>40+</option> 
     </select> 
    </div> 
    <button type="submit">Sign up</button> 
    </form> 
</div>