Получение сообщения об ошибке для появления встроенного ввода

Question

Я добавил плагин проверки jQuery для проверки формы контакта, которую у меня есть, но у меня возникает проблема. Я пытаюсь получить свой класс ошибок, чтобы отобразить встроенное поле ввода, в котором ошибка. Однако он отображается только в блоке. Я знаю, что это потому, что у меня есть 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; 
    } 

Пожалуйста, дайте мне знать, если это работает для вас тоже.

EDIT: Пожалуйста, дайте мне знать, если это сработает: 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; 
}