Вход

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

Подсветка не валидных полей формы на 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 — нет значения

25 сентября 2020 /

83 Views /

0 Comment
Ilya Web developer
Author

«Всегда пишите код так, будто сопровождать его будет склонный к насилию психопат, который знает, где вы живете.»Martin Golding

Отправить ответ

  Получать уведомления о новых комментариях  
Уведомлять