獲取錯誤消息以顯示輸入內聯

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