Как сделать проверку формы и добавление класса?

Question

[Юрий Кучеренко]

Всем привет! Помогите новичку реализовать проверку формы, суть такая - есть 4 поля, 3 из них required, если одно из полей required не заполненно то при нажатии на баттон бордер инпутов становится красным и маленький блок слева (там будет иконка) тоже меняет цвет на красный, не могу понять как это сделать, пытался разными способами, не хочет проверять и не знаю как туда класс добавить с бордером и красным цветом к блоку с иконкой при валидации.

UPD. И еще маленький вопрос как пофиксить что одно из полей по дефолту белое? оно должно быть как и все остальные

Всем кто откликнулся заранее очень большое спасибо, сегодня дедлайн и нужно сдавать проект. Ссылочка на Кодпен

+ Даю фото как оно вообще так то. Тут 3 состояния, Неактивный, в фокусе, инвалидный (опять таки становится красным если поле не заполнено при нажатии на баттон)

Answer 1

[Memorivardo]

Если совсем в лоб, то через $('[required]').each(function(){}) можно перебрать все поля и проверить их значение через $(this).val(), если пустота, то сделать какой-нибудь флажок error, после которого добавлять класс. Получится какая-то такая кулебяка:

$('#submitbtn').submit(function(){
		var error = false;
		$('[required]').removeClass('border_error');
		$('[required]').each(function(){
			if(!$(this).val())
			{
				$(this).addClass('border_error');
				error = true;
			}
		});
		if(error) return false;
	});

Это псевдокод и некрасивое решение, но работать должно :) Только Вам надо стандартный еррор из HTML5 убрать, который от атрибута required появляется иначе весь дизайн ошибок коту под хвост.

Answer 2

[stransens]

поле белое - потому что оно необязательное и даже пустое считается валидным. а для валидных у тебя прописан белый фон.
если вопрос не решился еще - напиши в скайп stransens, скину плагин валидации простой. сама им проверяю.