Question

我有一个小问题：

我正在编写一个注册表单，我决定测试jQuery验证。不幸的是，返回的错误消息到处都是。不确定它是否是一个CSS问题，但我一直在与对齐几个小时的斗争，真的很感激一些帮助。

enter image description here

如上图所示我试图获得“此字段是必需的”。文本字段下直接对齐的文字。

这是我到目前为止使用的代码：

的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/>和<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>

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底部边距 - ＆gt;消息是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>

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

4 个答案: