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>