1

我有一个用 CSS 设置样式的表单，可以正确排列文本框。我在表单中使用jQuery Validation。由于验证产生的错误，我在提交表单时遇到了布局问题。我的CSS如下：

#form p label {
    padding-top: 5px;
    display: block;
    width: 100px;
    float: left;
}

我知道float: left;导致问题的原因。我正在寻找在不改变布局的情况下出现在每个文本框旁边的错误。jQuery 验证错误的类是.errors. 我制作了一个jsFiddle来重新创建我的问题。

4

2 回答 2

0

在错误元素上使用绝对定位将使您的表单在错误时保持不变。然而，这将需要额外的标记来维护您的表单显示。在此示例中，在您的输入字段中添加了一个包装器，<span class="item"></span>以为错误元素提供位置边界。

请注意，为label元素设置的属性也会影响您的错误标签。

有关示例，请参见http://jsfiddle.net/K5fR8/3/ 。

完整标记如下：

HTML

<form id="form" action="" method="post">
<p>
    <label for="email">Email:</label>
    <span class="item">
        <input type="text" name="email" id="email" placeholder="Email" value="" class="required" />
    </span>
</p>
<p>
    <label for="password">Password:</label>
    <span class="item">
        <input type="password" name="password" id="password" placeholder="Password" value="" class="required" />
    </span>
</p>
<p>
    <label for=""></label>
    <input type="submit" name="submit" id="submit" value="Log In" class="button" />
</p>

CSS

#form p label {
    padding-top: 5px;
    display: block;
    width: 100px;
    float: left;
}

#form p .item {
    position: relative;
}

#form p .item label.error {
    float: none;
    position: absolute;
    top: 0;
    right: -100px; /* Offset by width set on label element */
    padding: 0px;
}
于 2013-03-21T00:21:11.070 回答
0

您的元素 CSS 以页面上的所有label元素为目标，因此它覆盖了插件使用的元素以显示表单错误。 labellabel

简单地添加这个 CSS 只会将label插件使用的元素设置回默认值，而不会影响任何其他label元素。

#form p label.error {
    float: none;
    display: inline;
}

演示：http: //jsfiddle.net/4Wspp/

编辑：

我的回答解决了您的问题，但如果您想更多地利用 jQuery，您应该使用 jQuery 插件查看另一个选项以获得精美的工具提示。

演示：http: //jsfiddle.net/kyK4G/

从这个 SO 答案： https ://stackoverflow.com/a/14741689/594235

于 2013-03-21T01:28:33.200 回答