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

Question

我添加了jQuery validate插件来验证我的联系表单，但我遇到了一个问题。我试图让我的错误类显示错误所在的输入字段的内联。但是，它只显示在块中。我知道这是因为我的输入类有display: block !important;，但是如果我拿走它，它就会在出现错误时将我的块内联移动。

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

请在评论中查看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的变化。

Answer 2

您可以使用以下标记和CSS。 查看演示：Fiddle

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


#contactform input[type="text"], input[type="email"], textarea {
  margin-bottom: 15px;
  width: 300px;
  float: left;
}

#contactform div {
  overflow: auto
}

.error {
  color: red;
  display: block;
}