我有一个小问题:
我目前正在编写一个注册表单,我决定测试 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>
提前致谢!
更新
我正在使用这个插件:
http://bassistance.de/jquery-plugins/jquery-plugin-validation/