jquery - 使用 jQuery 验证时的 CSS 对齐问题

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>

提前致谢！

更新

我正在使用这个插件：

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

Answer 1

您需要对 CSS 和 HTML 进行一些更新。

这是给出的 CSS 更新，我完全给出的 HTML。

HTML 的更新是，我已将<input/>and<select>放在具有类“字段<div>”的元素下，以实现通用样式和更好的对齐。

CSS 更新

#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>

Answer 2

使用...更新您的样式表

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

Answer 3

您的问题似乎不是上述任何一个，html、css 或验证。从某种意义上说，它在布局本身。

Validate 像预期的那样直接在输入字段下添加它，但是由于输入和标签之间没有划分，因此形成的新行从标签下开始。如果您稍微改变您的布局，使其分为一侧标记一侧输入的分区，并且有点像老式的表格布局，那么您的验证应该按照您希望的方式工作。

您也可以使用 CSS 为验证错误容器添加填充或边距，并尝试以这种方式推送它，尽管这可能也没有完全达到预期的效果，并且等待您的方法可能无法正常工作相应的浏览器

Answer 4

几周前我遇到了同样的问题。jQuery Validate 插件在输入后立即插入错误消息。您的输入有 20px 底部边距 -> 消息在下方 20px。

解决方法：将输入边距设置为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>