Как добавить класс если поле input пустое (на jQuery)?

Question

[keche]

Как добавить к input класс .error, если оно пустое?
Всего поля три, два input и 1 texarea.
Следующий код не дает sumbit отправить данные, если хотя бы одно поле не заполнено. И подсвечивает целую форму, а не отдельно взятые элемент input или textarea.
Нужно чтобы добавлялся класс erorr к каждому элементу input или textarea если они не заполнены, при клике на button.

Сейчас код такой:

$('#form').submit(function() { // проверка на пустоту заполненных полей.
		if (document.form.name.value == '' || document.form.email.value == '' || document.form.usertext.value == '' ) {
			$(this).addClass('error');
			valid = false;
			return valid;
		}

Answer 1

[Александр Петров]

Я недавно для себя делал форму, там реализована ваша проблема: https://github.com/lesson-web/forms-lw
В двух словах, надо перебрать все input-ы и если они пустые, то вывести ошибку:

$('form').find('input').each(function(){
  if($(this).val().lenght==0){
    $(this).addClass('error');
  }
});

Comments

[keche]

Почему-то не работает.

[Александр Петров]

keche, возможно, я ошибся где-то, перепроверьте код. Главное, идея понятна)

Answer 2

[netrox]

https://jqueryvalidation.org/
Чтобы не изобретать велосипед.

Comments

[keche]

Плагин в этом случае не рассматриваю.

[Froggyweb]

A если добавить в форму еще 45 полей? Плагин лучше без вариантов. А вообще для костылей нужно в цикле проходить все инпуты с атрибутом required и смотреть значение если попался пустой то ой... Хотя браузеры это и так умеют еще и проверяют то ли там введено.

Answer 3

[Ankhena]

1. Проверять length, если 0, то добавлять класс, иначе убирать.
http://jquery.page2page.ru/index.php5/Тип_string

2. https://webref.ru/css/empty