РИТ++ 2017, Frontend Сonf Зал Конгресс-холл, 6 июня, 11:00 Тезисы: http://frontendconf.ru/2017/abstracts/2505.html Главная → Для участников → Список тезисов Make form validation fun againНовинки Доклад принят в программу конференции Павел Ловцевич LOVATA Сооснователь и бессменный CTO компании LOVATA. С 2016-го года — сооснователь и CTO MedTech-стартапа 2doc.by, который получил широкое признание профессионального сообщества и вошёл в семью проектов ведущего белорусского портала tut.by. Идейный вдохновитель и основатель ряда профессиональных мероприятий — Web Standards Day, MinskCSS, MinskJS. Страстный автоспортивный болельщик! =) Тезисы Разработка форм является одним из самых ответственных и сложных этапов создания веб-интерфейсов. Пользовательские данные (получение, проверка, обратная связь) — критическая составляющая успешного опыта взаимодействия пользователя (UX) с интерфейсом (UI), которая прямым образом влияет на успешность проекта. Современные браузеры предоставляют разработчику широкий набор встроенных методов для работы с данными пользователя. Разработка собственных велосипедов и использование тяжелых библиотек со множеством зависимостей остались в прошлом. В отдельных случаях можно даже обойтись без написания Javascript-кода! ...

1. Павел Ловцевич
Make form validation
GREAT FUN AGAIN!LIVE SLIDES HERE

2. Павел Ловцевич
CTO @ LOVATA & 2doc.by
@zigzag_mcquack
p.lovtsevich@lovata.com

5. Валидация
Подтверждение на основе представления объективных свидетельств
того, что требования, предназначенные для конкретного использования
или применения, выполнены.
(ISO 9000:2005),Системы менеджмента качества.Основные положения и
словарь
“
5

6. Цели валидации
• Получение корректных данных в корректном формате.
• Защита пользователя.
• Защита приложения.
6

7. Constraint
Validation API

8. Constraint Validation API methods
• Методы
• checkValidity() → true/false → invalid event
• reportValidity() → true/false → invalid event + сообщение об ошибке
• setCustomValidity(message) → true/false → invalid event + текст для
сообщения об ошибке
• Свойства
• willValidate → true/false на submit
• validity → ValidityState Properties
8

9. 9

10. required

11. :invalid / :valid
required minlength
Отправить
11

12. :invalid
<input> ✓ ✓ ✓ ✓
<fieldset> ✗ ✓ ✓ ✓
<form> ✗ ✓ ✓ ✓
<button> ✗ ✗ ✗ ✗
input[type="submit"]:-moz-submit-invalid
1
1
12

13. :valid
<input> ✓ ✓ ✓ ✓
<fieldset> ✗ ✓ ✓ ✓
<form> ✗ ✓ ✓ ✓
<button> ✓ ✓ ✓ ✓
13

14. :invalid / :valid button
required minlength
Отправить
14

15. form:invalid
form:valid
:invalid / :valid button
button[type="submit"] {
box-shadow: 0px 0px 2px 2px rgba(255, 0, 0, 0.5);
}
button[type="submit"] {
box-shadow: 0px 0px 2px 2px rgba(0, 255, 0, 0.5);
}
01.
02.
03.
04.
05.
06.
15

16. pointer-events: none;
pointer-events: auto;
:invalid / :valid button
form:invalid button[type="submit"] {
box-shadow: 0px 0px 2px 2px rgba(255, 0, 0, 0.5);
}
form:valid button[type="submit"] {
box-shadow: 0px 0px 2px 2px rgba(0, 255, 0, 0.5);
}
01.
02.
03.
04.
05.
06.
07.
08.
16

18. minlength
maxlength

19. События minlength / maxlength
Ограничение JS CSS
minlength .tooShort :invalid
maxlength .tooLong :invalid / :out-of-range
19

20. minlength="2" maxlength="4"
minlength / maxlength
<input type="text" >
20

21. minlength / maxlength
required optional
Отправить
21

22. 22

23. 23

24. minlength / maxlength + value
123456 12
Отправить
24

26. pattern

27. 27

28. pattern
• [a-z]
• w
• d
• (a|b)
• {2,4}
28

29. pattern
• [a-z]
• w
• d
• (a|b)
• {2,4}
29

30. pattern="^w{2,}$"
minlength + Edge support
<input type="text"
minlength="2"
maxlength="4"
>
01.
02.
03.
04.
30

31. ^ $ w{2,}
minlength + Edge support
<input type="text"
minlength="2"
maxlength="4"
pattern=" w{2,} ">
<input type="text"
minlength="2"
maxlength="4"
pattern=" ">
01.
02.
03.
04.
01.
02.
03.
04.
31

32. title

33. Pattern message
<input type="text" pattern="220[0-9]{3,}"
title="Формат &quot;220XXX&quot;,
где &quot;XXX&quot; числа 0-9.">
01.
02.
03.
04.
33

34. 220
Pattern message
<input type="text" pattern=" [0-9]{3,}"
title="Формат &quot;220XXX&quot;,
где &quot;XXX&quot; числа 0-9.">
01.
02.
03.
04.
34

35. [0-9]{3,}
Pattern message
<input type="text" pattern="220 "
title="Формат &quot;220XXX&quot;,
где &quot;XXX&quot; числа 0-9.">
01.
02.
03.
04.

36. title="Формат &quot;220XXX&quot;,
где &quot;XXX&quot; числа 0-9.">
Pattern message
<input type="text" pattern="220[0-9]{3,}"01.
02.
03.
04.

37. Pattern message
220000
Отправить
37

38. Pattern message
220000
Отправить
38

39. 39

40. Дальше больше

41. 41

42. Email,url
Ограничение JS CSS
required .valueMissing :invalid
maxlength .tooLong :invalid
minlength .tooShort :invalid
pattern .patternMismatch :invalid
type .typeMismatch :invalid
42

43. Выделение ошибки :required
john@doe.com
• required
• type
Отправить
43

44. 44

45. :not( )
:valid
Выделение ошибки :required
input :placeholder-shown + ul .error-required {
color: green; /* required - ok */
}
input + ul .error-type {
color: green; /* type - ok */
}
01.
02.
03.
01.
02.
03.
45

46. :user-error

47. 47

48. Number
Ограничение JS CSS
required .valueMissing :invalid
type .badInput :invalid
min .rangeUnderflow :invalid / :out-of-range
max .rangeOverflow :invalid / :out-of-range
step .stepMismatch :invalid
48

49. 49

50. Выделение ошибки :out-of-range
number
• required
• range
• step
Отправить
50

51. :in-range
Выделение ошибки :out-of-range
input :not(:placeholder-shown) + ul .error-range {
color: green;
}
01.
02.
03.
51

52. :not(:placeholder-shown)
Выделение ошибки :out-of-range
input:in-range + ul .error-range {
color: green;
}
01.
02.
03.
52

53. :valid
Выделение ошибки :out-of-range
input + ul .error-step {
color: green;
}
01.
02.
03.
53

54. JIT

55. :not(:placeholder-shown)
Своевременность валидации
input:invalid:not(:focus) {
color: red;
}
01.
02.
03.
55

56. :not(:focus)
Своевременность валидации
input:invalid :not(:placeholder-shown) {
color: red;
}
01.
02.
03.
56

57. :invalid
Своевременность валидации
input :not(:focus):not(:placeholder-shown) {
color: red;
}
01.
02.
03.
57

58. Своевременность валидации
john@doe.com
Отправить
58

59. Своевременность валидации
field.onblur = function () {
this.reportValidity()
}
01.
02.
03.
59

60. Своевременность валидации
john@doe.com
Отправить
60

61. reportValidity()

62. setCustomValidity()

63. Кастомное сообщение
var field = [checking field];
field.addEventListener('blur', function () {
if (field.validity.typeMismatch) {
field.setCustomValidity("Error message.");
} else {
field.setCustomValidity("");
}
});
01.
02.
03.
04.
05.
06.
07.
08.
63

64. patternMismatch
setCustomValidity
Кастомное сообщение
var field = [checking field];
field.addEventListener('blur', function () {
if (field.validity. ) {
field. ("Error message.");
} else {
field.setCustomValidity("");
}
});
01.
02.
03.
04.
05.
06.
07.
08.
64

65. setCustomValidity("")
Кастомное сообщение
var field = [checking field];
field.addEventListener('blur', function () {
if (field.validity.patternMismatch) {
field.setCustomValidity("Error message.");
} else {
field. ;
}
});
01.
02.
03.
04.
05.
06.
07.
08.
65

67. novalidate

68. novalidate
• Отключает системные сообщения.
• Сохраняет состояния валидности (JS, CSS).
• Позволяет отправить форму.

69. field.validity.patternMismatch
Точка управления
var field = [checking field];
field.addEventListener('blur', function () {
if ( ) {
field.setCustomValidity("Error message.");
} else {
field.setCustomValidity("");
}
});
01.
02.
03.
04.
05.
06.
07.
08.
69

70. pass1!=pass2
Точка управления
var field = [checking field];
field.addEventListener('blur', function () {
if ( ) {
field.setCustomValidity("Error message.");
} else {
field.setCustomValidity("");
}
});
01.
02.
03.
04.
05.
06.
07.
08.
70

71. Собираем информацию о поле
// выбираем поле
var email = document.getElementById('email');
// читаем свойства
var validations = ['typeMismatch', 'tooShort'];
01.
02.
03.
04.
71

72. Собираем информацию о поле
function showError(typeError) {
console.log('Error type - ' + typeError);
}
01.
02.
03.
72

73. Собираем информацию о поле
email.addEventListener('blur', function(){
for (var i = 0; i < validations.length; i++){
if (email.validity[validations[i]]) {
showError(validations[i]);
}
}
});
01.
02.
03.
04.
05.
06.
07.
73

74. Собираем информацию о поле
Email *
74

75. Глушим системные сообщения
document.forms[0].addEventListener('invalid',function (e) {
e.preventDefault();
},true);
01.
02.
03.
75

76. Native form validation,Peter-Paul Koch
• Part 1
• Part 2
• Part 3
76

77. Выводы
• Прогрессивное улучшение.
• Непривычный способ решения задачи.
• Правильный способ решения задачи.
• Проблемы багов, архитектуры и кроссбраузерности решаемы.
• Место для OpenSource!
77

78. Валидация на
сервере!

79. Спасибо за
внимание!
Вопросы?