Выделение текста и input при незаполненом поле в форме?

Question

[LOBBY GIRL]

Как сделать выделение border, текста и появление с низу input подсказки при отправки формы с пустыми полями?

код формы:

<label>
   <div class="form_lbl_name">Ваше имя:</div>
   <input class="form_name" type="text" name="Имя" required>
</label>

Answer 1

[lega]

jsfiddle.net/lega911/ppqmkut6

Comments

[LOBBY GIRL]

вы не поняли суть вопроса)

[lega]

Павел Горбунов: форма? можно так: jsfiddle.net/lega911/d7qd8uqz

[LOBBY GIRL]

lega: спасибо! а можете рассказать, что сделано?

[lega]

Павел Горбунов:
al-app="main" запускает метод main
al-class="red-text: alert && !name" - добавляет класс red-text при условии alert && !name
al-value="name" - синхронизация переменной name и значения контрола
:hidden="!(alert && !name)" - скрывает элемент при условии
@submit="send()" - вызывает функцию send на сабмит

все переменные находятся в scope и доступны в ф-ии main, туда ещё можно логики добавить.
так можно отправить сам сабмит если все ок: jsfiddle.net/lega911/njfq16w7

тут ещё инфа: https://habrahabr.ru/post/272125/

Answer 2

[Алексей]

Рекомендую ознакомиться с jQuery Validation Plugin - достаточно прост в настройке. Валидацию можно запускать по заданию класса у поля.

Если требуется на русском о нем почитать, погуглите, там есть уроки. Либо в книжке "JavaScript и jQuery - исчерпывающее руководство".