Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Make form validation fun again / Павел Ловцевич (LOVATA)

РИТ++ 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-кода!
...

  • Login to see the comments

  • Be the first to like this

Make form validation fun again / Павел Ловцевич (LOVATA)

  1. 1. Павел Ловцевич Make form validation GREAT FUN AGAIN!LIVE SLIDES HERE
  2. 2. Павел Ловцевич CTO @ LOVATA & 2doc.by @zigzag_mcquack p.lovtsevich@lovata.com
  3. 3. Валидация Подтверждение на основе представления объективных свидетельств того, что требования, предназначенные для конкретного использования или применения, выполнены. (ISO 9000:2005),Системы менеджмента качества.Основные положения и словарь “ 5
  4. 4. Цели валидации • Получение корректных данных в корректном формате. • Защита пользователя. • Защита приложения. 6
  5. 5. Constraint Validation API
  6. 6. 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
  7. 7. 9
  8. 8. required
  9. 9. :invalid / :valid required minlength Отправить 11
  10. 10. :invalid <input> ✓ ✓ ✓ ✓ <fieldset> ✗ ✓ ✓ ✓ <form> ✗ ✓ ✓ ✓ <button> ✗ ✗ ✗ ✗ input[type="submit"]:-moz-submit-invalid 1 1 12
  11. 11. :valid <input> ✓ ✓ ✓ ✓ <fieldset> ✗ ✓ ✓ ✓ <form> ✗ ✓ ✓ ✓ <button> ✓ ✓ ✓ ✓ 13
  12. 12. :invalid / :valid button required minlength Отправить 14
  13. 13. 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
  14. 14. 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
  15. 15. minlength maxlength
  16. 16. События minlength / maxlength Ограничение JS CSS minlength .tooShort :invalid maxlength .tooLong :invalid / :out-of-range 19
  17. 17. minlength="2" maxlength="4" minlength / maxlength <input type="text" > 20
  18. 18. minlength / maxlength required optional Отправить 21
  19. 19. 22
  20. 20. 23
  21. 21. minlength / maxlength + value 123456 12 Отправить 24
  22. 22. pattern
  23. 23. 27
  24. 24. pattern • [a-z] • w • d • (a|b) • {2,4} 28
  25. 25. pattern • [a-z] • w • d • (a|b) • {2,4} 29
  26. 26. pattern="^w{2,}$" minlength + Edge support <input type="text" minlength="2" maxlength="4" > 01. 02. 03. 04. 30
  27. 27. ^ $ 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
  28. 28. title
  29. 29. Pattern message <input type="text" pattern="220[0-9]{3,}" title="Формат &quot;220XXX&quot;, где &quot;XXX&quot; числа 0-9."> 01. 02. 03. 04. 33
  30. 30. 220 Pattern message <input type="text" pattern=" [0-9]{3,}" title="Формат &quot;220XXX&quot;, где &quot;XXX&quot; числа 0-9."> 01. 02. 03. 04. 34
  31. 31. [0-9]{3,} Pattern message <input type="text" pattern="220 " title="Формат &quot;220XXX&quot;, где &quot;XXX&quot; числа 0-9."> 01. 02. 03. 04.
  32. 32. title="Формат &quot;220XXX&quot;, где &quot;XXX&quot; числа 0-9."> Pattern message <input type="text" pattern="220[0-9]{3,}"01. 02. 03. 04.
  33. 33. Pattern message 220000 Отправить 37
  34. 34. Pattern message 220000 Отправить 38
  35. 35. 39
  36. 36. Дальше больше
  37. 37. 41
  38. 38. Email,url Ограничение JS CSS required .valueMissing :invalid maxlength .tooLong :invalid minlength .tooShort :invalid pattern .patternMismatch :invalid type .typeMismatch :invalid 42
  39. 39. Выделение ошибки :required john@doe.com • required • type Отправить 43
  40. 40. 44
  41. 41. :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
  42. 42. :user-error
  43. 43. 47
  44. 44. 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
  45. 45. 49
  46. 46. Выделение ошибки :out-of-range number • required • range • step Отправить 50
  47. 47. :in-range Выделение ошибки :out-of-range input :not(:placeholder-shown) + ul .error-range { color: green; } 01. 02. 03. 51
  48. 48. :not(:placeholder-shown) Выделение ошибки :out-of-range input:in-range + ul .error-range { color: green; } 01. 02. 03. 52
  49. 49. :valid Выделение ошибки :out-of-range input + ul .error-step { color: green; } 01. 02. 03. 53
  50. 50. JIT
  51. 51. :not(:placeholder-shown) Своевременность валидации input:invalid:not(:focus) { color: red; } 01. 02. 03. 55
  52. 52. :not(:focus) Своевременность валидации input:invalid :not(:placeholder-shown) { color: red; } 01. 02. 03. 56
  53. 53. :invalid Своевременность валидации input :not(:focus):not(:placeholder-shown) { color: red; } 01. 02. 03. 57
  54. 54. Своевременность валидации john@doe.com Отправить 58
  55. 55. Своевременность валидации field.onblur = function () { this.reportValidity() } 01. 02. 03. 59
  56. 56. Своевременность валидации john@doe.com Отправить 60
  57. 57. reportValidity()
  58. 58. setCustomValidity()
  59. 59. Кастомное сообщение 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
  60. 60. 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
  61. 61. 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
  62. 62. novalidate
  63. 63. novalidate • Отключает системные сообщения. • Сохраняет состояния валидности (JS, CSS). • Позволяет отправить форму.
  64. 64. 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
  65. 65. 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
  66. 66. Собираем информацию о поле // выбираем поле var email = document.getElementById('email'); // читаем свойства var validations = ['typeMismatch', 'tooShort']; 01. 02. 03. 04. 71
  67. 67. Собираем информацию о поле function showError(typeError) { console.log('Error type - ' + typeError); } 01. 02. 03. 72
  68. 68. Собираем информацию о поле 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
  69. 69. Собираем информацию о поле Email *   74
  70. 70. Глушим системные сообщения document.forms[0].addEventListener('invalid',function (e) { e.preventDefault(); },true); 01. 02. 03. 75
  71. 71. Native form validation,Peter-Paul Koch • Part 1 • Part 2 • Part 3 76
  72. 72. Выводы • Прогрессивное улучшение. • Непривычный способ решения задачи. • Правильный способ решения задачи. • Проблемы багов, архитектуры и кроссбраузерности решаемы. • Место для OpenSource! 77
  73. 73. Валидация на сервере!
  74. 74. Спасибо за внимание! Вопросы?

×