Подсветка не валидных полей формы на js

Правильным тоном в разработке интерфейсов является проверка полей на валидность до отправки их на сервер.

Хотя это не избавляет от необходимости их проверять и на сервере. Данный листинг является примером проверки полей формы на валидность, в результате чего не валидные поля будут подсвечиваться.

В разметке максимально использовать возможности HTML5. Например указание required

Объект ValidityState

1
2
3
4
5
6

<form action="">
	<input type="text" maxlength="3">
	<input type="email">
	<input type="text" required>
	<input type="submit">
</form>

1
2
3
4
5
6
7
8
9
10
11

let form = document.querySelector("form");
 
let body = document.querySelector("body");
console.log(form);
 
form.addEventListener('invalid', function(evt) {
	console.log(evt.target);
 
	evt.target.style.color = '#f00';
 
}, true)

• badInput — введено неправильное значение
• customError — задано кастомное сообщение об ошибке
• patternMismatch — не соответствует паттерну
• rangeOverflow — больше значения max
• rangeUnderflow — меньше значения min
• stepMismatch — значение не попадает в step
• tooLong — больше максимальной длины
• tooShort — слишком короткое значение
• typeMismatch — не совпадает тип
• valid — валидно ли поле
• valueMissing — нет значения