javascript - 获取错误消息以显示内联输入

Question

我添加了 jQuery 验证插件来验证我拥有的联系表单，但我遇到了问题。我试图让我的错误类显示错误所在的输入字段的内联。但是，它仅以 block 形式显示。我知道这是因为我的输入类有 display: block !important;，但如果我去掉它，只要出现错误，它就会内联移动我的 block 。

有谁知道我该如何解决这个问题？

请在评论中查看 jsfiddle。我无法弄清楚如何在代码段中插入外部源。

<form id="contactform" method="post" action="" novalidate>
  <input class="contact_input" type="text" name="name" placeholder="Name">
  <input class="contact_input" type="email" name="email" placeholder="Email">
  <textarea class="contact_input" name="message" placeholder="Message"></textarea>
  <input type="submit" name="submitform" value="Send">
</form>

CSS

.contact_input {
  display: block !important;
  margin-bottom: 15px;
  width: 300px;
}
.error {
  color: red;
  display: inline;
  padding-left: 20px;
}

Answer 1

我认为以下 CSS 有效:

    .contact_input {
      display: block !important;
      margin-bottom: 15px;
      width: 300px;
    }
    .error {
      color: red;
      float: left;
      margin-left: 10px;
    }
    .clear {
      clear: both;
      padding: 10px;
      display: block;
    }

如果它也适用于您，请告诉我。

编辑:请让我知道这是否有效:https://jsfiddle.net/wgtLnxfw/6/它对标记和 CSS 进行了更改。