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

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; 
}