1

我试图构建一个响应式表单，然后我会在我的一些网站中使用它，但被一些细节卡住了。我想用javascript启用输入验证，所以当用户在输入文本框中插入无效输入时，我希望框弹出一条错误消息，输入右侧有一个IMG标签，下面有一个DIV标签输入。我通过将这些元素附加（jQuery）到输入的父元素（一个标签）来实现这一点。

这是基本输入：

<label for="errore"><span class="title">Errato</span><input type="text" name="errore" id="errore" size="30" maxlength="30" value="Cliccami e poi esci"/></label>

这是我附加元素的方式。

$(this).parent().append("<img class='error' src='css/img/cross.png' alt='error' /><span class='error'>Input non valido.</span>");

因此，如果用户随后输入正确的输入并退出 INPUT 标签，则错误消息应该会消失。我通过删除这样的元素来做到这一点：

$(this).parent().find("*.error").remove();

它工作得很好。但是，如果我按照这个顺序：错误输入，退出元素，错误消息，正确输入，退出元素，错误消息消失，错误输入，退出元素，错误消息重新出现但图像在新行上！那只是在铬。不知道为什么。它似乎取决于 IMG 元素旁边的元素，如果它是内联元素，它在第一次和第二次都可以正常工作，如果它是块元素，它在第一次和第二次都可以正常工作。

所以，我的问题是图像元素，我不希望它换行，但我希望它旁边的元素是块元素。

我知道这可能不太清楚，所以我将包括我的例子。

表单示例（JSFiddle）

在示例中，输入然后退出标题为“Errato”的输入，添加错误消息，然后输入并退出以删除它就足够了。因此，如果您这样做 3 次，您应该会收到错误的错误消息。

看起来图像要显示：块或其他东西，因为效果是那样，但是如果您检查浏览器控制台上的 css，它实际上是 display: inline。

如果您需要更多详细信息，请随时询问。

4

3 回答 3

2

看看这个方法来解决你的问题。我认为您只需将输入字段放在标签元素内，以便更好地添加和删除信息文本。所以这也可能是一个解决方案。

我所做的更改：在 CSS 中：删除了包装 labeltext 的 span 元素

label.title{ font-weight:bold; display:block; margin-top:5px; }

在 Javascript 中：直接在输入字段之后添加两个 info 元素，并删除该输入字段的下两个兄弟元素，类为“.error”。还将保存错误消息的跨度更改为 div 元素。

我也叉了你的小提琴

于 2012-04-18T11:12:32.587 回答
0

行对齐已解决：http: //jsfiddle.net/CCEn2/6/

所做的更改：
在 CSS 中：删除 - “display:block;” 对于“span.error”

span.error{ color: #ac3b2a; font-style: italic; }


在 JS 中：在标签内添加图像

$(this).parent().append("<span class='error'><img class='error' src='css/img/cross.png' alt='error' />Input non valido.</span>");

我希望您的查询是关于内联对齐的？

于 2012-04-18T10:03:37.003 回答
0

float:left到图像可能会解决它。

于 2012-04-18T08:59:08.250 回答