javascript - css 在输入字段上方显示验证消息

Question

鉴于我有以下 html 位：

form p label {
    display: block;
    float: left;
    font-size: 14px;
    color: green;
}

#myField.error {
  content: 'validation error occurred';
  display: block;
}

<form>
<div id="myField">
  <p class="required">
      <label for="username">Username:</label>
      <input type="text" name="username" id="username" class="error" maxlength="10" value="" title="Username" required />
  </p>
</div>
</form>

如何在输入字段上方显示验证错误消息，向右浮动？我不想手动修改 html 代码。但是，使用 jquery 或 js 添加一些 span 标签是可以的。总而言之，首选css解决方案。

Answer 1

我对您的 html 做了一些小改动，将错误类从输入移到了 p 元素。在 CSS 中使用 ::before CSS 伪元素（并冒昧地为输入添加红色边框，为错误消息添加红色边框）

form p label {
    display: block;
    float: left;
    font-size: 14px;
    color: green;
}

#myField .error::before {
  content: 'validation error occurred';
  position: absolute;
  top: -4px;
  color: red;
}

#myField .error input {
  border-color: red;
}

<form>
<div id="myField">
  <p class="required error">
      <label for="username">Username:</label>
      <input type="text" name="username" id="username" class="" maxlength="10" value="" title="Username" required />
  </p>
</div>
</form>

此代码的 JS Fiddle 链接