Створення приголомшливих форм

1. Створення ефективних форм
2. TL; DR
3. Показуйте користувачам, як далеко вони вже зайшли
4. Надавайте наочні календарі при виборі дат
5. Вибір найкращого типу введення
6. TL; DR
7. Видавайте підказки під час введення за допомогою datalist
8. Позначайте статі поля належним чином
9. TL; DR
10. Розмір і місце розташування позначення
11. використовуйте наповнювачі
12. Використовуйте метадані для забезпечення автозаповнення
13. Рекомендовані значення атрибутів полів введення name і autocomplete
14. Атрибут autofocus
15. Забезпечення перевірки в реальному часі
16. TL; DR
17. Стандартні шаблони регулярних виразів
18. Атрибут required
19. Атрибути min, max і step
20. Атрибут maxlength
21. Атрибут minlength
22. Для більш складної перевірки в реальному часі використовуйте JavaScript
23. Задавайте нестандартні повідомлення про результати перевірки
24. Не дозволяйте відправляти форми з помилками
25. Відображуйте відповідь в реальному часі

На мобільних пристроях заповнювати форми непросто. Кращими є ті форми, в яких якомога менше полів. Хороші форми передбачають наявність семантичного введення. Клавіші мають змінюватися відповідно до того, які дані вводить користувач, наприклад, при виборі дати на календарі. Інформуйте про це своїх користувачів. Засоби перевірки повинні повідомляти користувачам, що саме їм потрібно зробити до того, як форма буде відправлена

Загальні відомості про ці вказівки зі створення приголомшливих форм см. В наведеному далі відеоролику.

Створення ефективних форм

Для створення ефективних форм слід уникати дій, що повторюються, запитувати тільки необхідну інформацію і направляти користувачів, показуючи їм, як далеко вони вже зайшли в заповненні форм, що складаються з декількох частин

TL; DR

• Заздалегідь заповнюйте поля наявними даними і обов'язково використовуйте автозаповнення.
• Використовуйте чітко позначені індикатори ходу виконання, щоб користувачам було простіше орієнтуватися в формах, що складаються з декількох частин.
• Надавайте наочний календар, щоб користувачам не доводилося переходити з сайту в додаток '' Календар '' на своєму смартфоні.

Зводить до мінімуму повторювані дії і однакові поля

У формах не повинно бути повторюваних дій, полів має бути стільки, скільки дійсно потрібно, а крім того необхідно використовувати автозаповнення , Щоб користувачам не становило жодних проблем заповнювати форми підставляє даними.

На веб-сайті Progressive.com користувачів спочатку просять ввести свій поштовий індекс, який потім автоматично переноситься в наступну частину форми.

Шукайте можливість заздалегідь вставляти дані, які вам вже відомі або можна передбачити, щоб користувачам не довелося вказувати їх ще раз. Наприклад, в поля адреси для доставки автоматично вносите остання адреса доставки, вказаний цим користувачем.

Показуйте користувачам, як далеко вони вже зайшли

Індикатори ходу виконання і меню повинні точно показувати загальний хід заповнення форм та виконання процесів, що складаються з декількох частин.

Використовуйте чітко позначені індикатори виконання, щоб користувачам було зручніше заповнювати форми, що складаються з декількох частин.

Якщо на самому початку розмістити занадто складну форму, досить імовірно, що користувачі підуть з вашого сайту, не пройшовши весь процес.

Надавайте наочні календарі при виборі дат

Найчастіше користувачам потрібно більше контексту при призначенні зустрічей і дат поїздок. Щоб спростити їм життя і не змушувати їх йти з вашого сайту, щоб подивитися в свій календар, надайте їм наочний календар для вибору дат початку і закінчення.

Веб-сайт готелю зі зручним віджетом календаря для вибору дат.

Вибір найкращого типу введення

Оптимізуйте введення інформації шляхом вибору правильного типу введення. Користувачам подобаються веб-сайти, які автоматично виводять на екран цифрова клавіатура для введення номерів телефонів або автоматично виконують перехід до наступного поля після заповнення попереднього. При розробці форм намагайтеся, щоб користувачеві не потрібно було зайвий раз робити натискання

TL; DR

• Вибирайте найбільш підходящий тип введення для своїх даних.
• Під час введення даних видавайте підказки за допомогою елемента datalist.

Типи введення HTML5

У HTML5 з'явилося кілька нових типів введення. Ці нові типи введення видають підказки браузеру про те, клавіатуру якого виду слід відобразити як екранну клавіатуру. Користувачам простіше вводити потрібну інформацію без необхідності перемикати свою клавіатуру, коли вони бачать тільки ті клавіші, які потрібні для введення даного типу.

Тип введення Стандартна клавіатура url
Для введення URL-адреси. Введення повинен починатися з відповідної схеми URI, напрімерhttp: //, ftp: // або mailto :. tel
Для введення номерів телефонів. Цей тип не примушує використовувати певний синтаксис для перевірки, тому, якщо потрібно забезпечити конкретний формат, можна використовувати шаблон. email
Для введення адрес електронної пошти. Видає підказки про те, що за замовчуванням на клавіатурі повинна бути клавіша з символом @. Можна додати атрибут multiple, якщо має бути зазначено кілька адрес електронної пошти. search
Поле для введення тексту в стилі, узгодженому зі стилем поля пошуку, реалізованого в даній платформі. number
Для введення цифр. Це може бути будь-який раціональне ціле число або число з плаваючою комою. range
Для введення цифр, проте, на відміну від типу числового введення, значення тут менш важливо. Відображається на екрані у вигляді повзунка. datetime-local
Для введення значень дати і часу в місцевому часовому поясі. date
Для введення дати (тільки), без часового поясу. time
Для введення часу (тільки), без часового поясу. week
Для введення тижні (тільки), без часового поясу. month
Для введення місяці (тільки), без часового поясу. color
Для вибору кольору.

Видавайте підказки під час введення за допомогою datalist

Елемент datalist не є типом введення. Це список пропонованих значень введення, який зв'язується з полем форми. Він дозволяє браузеру пропонувати варіанти автоматичного заповнення в міру того, як користувач вводить значення. На відміну від елементів select, коли користувачам доводиться переглядати довгі списки, щоб знайти необхідне значення, при цьому вони можуть вибрати тільки значення з цього списку, елемент datalist видає підказки в міру того, як користувач виконує введення.

<Label for = "frmFavChocolate"> Favorite Type of Chocolate </ label> <input type = "text" name = "fav-choc" id = "frmFavChocolate" list = "chocType"> <datalist id = "chocType"> < option value = "white"> <option value = "milk"> <option value = "dark"> </ datalist>

Позначайте статі поля належним чином

На мобільних пристроях заповнювати форми непросто. Кращими є ті форми, в яких якомога менше полів. Хороші форми передбачають наявність семантичного введення. Клавіші мають змінюватися відповідно до того, які дані вводить користувач, наприклад, при виборі дати на календарі. Інформуйте про це своїх користувачів. Засоби перевірки повинні повідомляти користувачам, що саме їм потрібно зробити до того, як форма буде відправлена

TL; DR

• Завжди використовуйте елементи label для полів форм, причому ці позначення повинні бути видні, коли фокус перекладається на дане поле.
• Використовуйте елементи placeholder, за допомогою яких підказуйте користувачам, що саме вони повинні ввести.
• Щоб допомогти браузеру в автоматичному заповненні форм, використовуйте стандартні елементи name для полів введення і вказуйте атрибут autocomplete.

важливість позначень

Елемент label повідомляє користувачеві, яку інформацію необхідно ввести в елемент форми. Кожен елемент label зв'язується з елементом поля введення шляхом його розміщення всередині елемента label або за допомогою атрибута "for". Застосування позначень до елементів форм також дозволяє поліпшити цільової розмір зони торкання: для перекладу фокуса на елемент введення користувач може торкнутися як позначення, так і поля введення.

<Label for = "frmAddressS"> Address </ label> <input type = "text" name = "ship-address" required id = "frmAddressS" placeholder = "123 Any Street" autocomplete = "shipping street-address">

Розмір і місце розташування позначення

Позначення і поля введення повинні бути досить великими, щоб їх було легко натискати. При книжкової орієнтації позначення полів слід розміщувати їх над елементами введення, а при альбомної - збоку від них. І позначення полів, і відповідні поля введення повинні бути видні на екрані одночасно. Будьте обережні з нестандартними обработчиками прокрутки, які можуть прокрутити елемент введення вгору сторінки, приховавши позначення, або позначення, розташовані нижче елементів введення, можуть опинитися під віртуальною клавіатурою.

використовуйте наповнювачі

Атрибут placeholder підказує користувачеві, що саме слід вказати в поле введення, зазвичай відображаючи значення в вигляді тексту світлого тону, поки користувач не почне вводити інформацію в елемент.

<Input type = "text" placeholder = "MM-YYYY" ...>

Використовуйте метадані для забезпечення автозаповнення

Користувачам подобається, коли веб-сайти економлять їх час, автоматично заповнюючи такі стандартні поля, як імена, адреси електронної пошти та інші часто використовувані поля. Крім того, це дозволяє знизити ймовірність помилки при введенні - особливо на віртуальних клавіатурах і невеликих пристроях.

Браузери використовують різні евристичні методи для визначення того, які поля вони можуть заповнювати автоматично даними, зазначеними користувачем раніше , А ви можете давати підказки браузеру, задаючи кожному полю введення атрибути name і autocomplete.

Наприклад, щоб підказати браузеру, що він може автоматично ввести в форму ім'я користувача, його адреса електронної пошти та номер телефону, слід використовувати:

<Label for = "frmNameA"> Name </ label> <input type = "text" name = "name" id = "frmNameA" placeholder = "Full name" required autocomplete = "name"> <label for = "frmEmailA" > Email </ label> <input type = "email" name = "email" id = "frmEmailA" placeholder = "[email protected]" required autocomplete = "email"> <label for = "frmEmailC"> Confirm Email < / label> <input type = "email" name = "emailC" id = "frmEmailC" placeholder = "[email protected]" required autocomplete = "email"> <label for = "frmPhoneNumA"> Phone </ label> < input type = "tel" name = "phone" id = "frmPhoneNumA" placeholder = "+ 1-555-555-1212" required autocomplete = "tel">

Рекомендовані значення атрибутів полів введення name і autocomplete

Значення атрибута autocomplete є частиною поточного стандарту WHATWG HTML . Далі наведені найбільш часто використовувані атрибути autocomplete.

Атрибути autocomplete можна супроводжувати ім'ям розділу, наприклад shipping given-name або billing street-address. Браузер буде заповнювати різні розділи окремо, а не як безперервну форму.

Атрибут Атрибут Тип контенту name autocomplete Ім'я name fname mname lname

• name (повне ім'я)
• given-name (ім'я)
• additional-name (по батькові)
• family-name (прізвище)

Адреса ел. пошти email email Адреса address city region province state zip zip2 postal country

• Для введення однієї адреси:
• Для введення двох адрес:
  • address-line1
  • address-line2
• address-level1 (область або республіка)
• address-level2 (місто)
• postal-code (поштовий індекс)
• country

Телефон phone mobile country-code area-code exchange suffix ext tel Кредитна карта ccname cardnumber cvc ccmonth ccyear exp-date card-type

• cc-name
• cc-number
• cc-csc
• cc-exp-month
• cc-exp-year
• cc-exp
• cc-type

Атрибут autofocus

В деякі форми, наприклад, на головній сторінці Google, де єдине, що потрібно від користувача, - це заповнити одне поле, можна додати атрибут autofocus. Коли цей атрибут заданий, настільні браузери відразу ж переводять фокус на це поле введення, після чого користувачі можуть негайно почати використовувати форму. Мобільні браузери ігнорують атрибут autofocus, щоб не викликати довільного відображення клавіатури.

Атрибут autofocus слід використовувати з обережністю, оскільки він прибирає фокус з клавіатури, що потенційно може не дати використати для навігації клавішу повернення на один символ.

<Input type = "text" autofocus ...>

Забезпечення перевірки в реальному часі

Перевірка даних в реальному часі допомагає не тільки забезпечити їх точність, але також поліпшити сприйняття користувачів. Сучасні браузери мають кілька вбудованих засобів, що дозволяють забезпечити перевірку даних в реальному часі. Крім того, вони можуть не дозволити користувачеві відправити форму з некоректними даними. Необхідно використовувати візуальні підказки, які вкажуть, чи правильно заповнена форма

TL; DR

• Використовуйте вбудовані в браузери атрибути перевірки, наприклад pattern, required, min, max і т. Д.
• При необхідності більш складних варіантів перевірки використовуйте JavaScript і API-інтерфейс перевірки обмежень.
• Відображуйте помилки, виявлені під час перевірки, в реальному часі, а якщо користувач намагається відправити неправильно заповнену форму, показуйте все поля, які йому необхідно виправити.

Використовуйте наступні атрибути для перевірки введення

Атрибут pattern

Атрибут pattern задає регулярний вираз , Що використовується для перевірки поля введення. Наприклад, щоб перевірити поштовий індекс США (5 цифр, за якими іноді слід дефіс і ще чотири цифри), атрібутpattern необхідно задати наступним чином:

<Input type = "text" pattern = "^ \ d {5,6} (?: [- \ s] \ d {4})? $" ...>

Стандартні шаблони регулярних виразів

Опис Регулярний вираз Поштова адреса [a-zA-Z \ d \ s \ - \, \ # \. \ +] + Поштовий індекс (США) ^ \ d {5,6} (?: [- \ s] \ d {4})? $ IP-адреса (IPv4) ^ (? :( ?: 25 [0-5] | 2 [0-4] [0-9] | [01]? [0-9] [0- 9]?) \.) {3} (?: 25 [0-5] | 2 [0-4] [0-9] | [01]? [0-9] [0-9]?) $ IP -адреса (IPv6) ^ (([0-9a-fA-F] {1,4}:) {7,7} [0-9a-fA-F] {1,4} | ([0-9a- fA-F] {1,4}:) {1,7}: | ([0-9a-fA-F] {1,4}:) {1,6}: [0-9a-fA-F] {1,4} | ([0-9a-fA-F] {1,4}:) {1,5} (: [0-9a-fA-F] {1,4}) {1,2} | ([0-9a-fA-F] {1,4}:) {1,4} (: [0-9a-fA-F] {1,4}) {1,3} | ([0- 9a-fA-F] {1,4}:) {1,3} (: [0-9a-fA-F] {1,4}) {1,4} | ([0-9a-fA-F ] {1,4}:) {1,2} (: [0-9a-fA-F] {1,4}) {1,5} | [0-9a-fA-F] {1,4} : ((: [0-9a-fA-F] {1,4}) {1,6}) |: ((: [0-9a-fA-F] {1,4}) {1,7} |:) | fe80: (: [0-9a-fA-F] {0,4}) {0,4}% [0-9a-zA-Z] {1,} |: :( ffff (0 {1,4}) {0,1}:) {0,1} ((25 [0-5] | (2 [0-4] | 1 {0,1} [0-9]) {0, 1} [0-9]).) {3,3} (25 [0-5] | (2 [0-4] | 1 {0,1} [0-9]) {0,1} [0 -9]) | ([0-9a-fA-F] {1,4}:) {1,4}: ((25 [0-5] | (2 [0-4] | 1 {0,1 } [0-9]) {0,1} [0-9]).) {3,3} (25 [0-5] | (2 [0-4] | 1 {0,1} [0- 9]) {0,1} [0-9])) $ IP-адреса (обидва) ^ (? :( ?: 25 [ 0-5] | 2 [0-4] [0-9] | [01]? [0-9] [0-9]?) \.) {3} (?: 25 [0-5] | 2 [0-4] [0-9] | [01]? [0-9] [0-9]?) | (([0-9a-fA-F] {1,4}:) {7,7 } [0-9a-fA-F] {1,4} | ([0-9a-fA-F] {1,4}:) {1,7}: | ([0-9a-fA-F] {1,4}:) {1,6}: [0-9a-fA-F] {1,4} | ([0-9a-fA-F] {1,4}:) {1,5} (: [0-9a-fA-F] {1,4}) {1,2} | ([0-9a-fA-F] {1,4}:) {1,4} (: [0- 9a-fA-F] {1,4}) {1,3} | ([0-9a-fA-F] {1,4}:) {1,3} (: [0-9a-fA-F ] {1,4}) {1,4} | ([0-9a-fA-F] {1,4}:) {1,2} (: [0-9a-fA-F] {1,4 }) {1,5} | [0-9a-fA-F] {1,4}: ((: [0-9a-fA-F] {1,4}) {1,6}) | :( (: [0-9a-fA-F] {1,4}) {1,7} |:) | fe80: (: [0-9a-fA-F] {0,4}) {0,4} % [0-9a-zA-Z] {1,} |: :( ffff (0 {1,4}) {0,1}:) {0,1} ((25 [0-5] | ( 2 [0-4] | 1 {0,1} [0-9]) {0,1} [0-9]).) {3,3} (25 [0-5] | (2 [0- 4] | 1 {0,1} [0-9]) {0,1} [0-9]) | ([0-9a-fA-F] {1,4}:) {1,4}: ((25 [0-5] | (2 [0-4] | 1 {0,1} [0-9]) {0,1} [0-9]).) {3,3} (25 [ 0-5] | (2 [0-4] | 1 {0,1} [0-9]) {0,1} [0-9])) $ Номер кредитної картки ^ (?: 4 [0-9 ] {12} (?: [0-9] {3})? | 5 [1-5] [0-9] {14} | 3 [47] [0-9] {13} | 3 (?: 0 [0-5] | [68] [0-9]) [0-9] {11} | 6 (?: 011 | 5 [0-9] {2}) [0-9] {12} | (?: 2131 | 1800 | 35 \ d {3}) \ d {11}) $ Номер соціального страхування ^ \ d {3} - \ d {2} - \ d {4} $ Номер телефону в Північній Америці ^ (?: (?: \ +? 1 \ s * (?: [.-] \ s *)?)? (?: \ (\ s * ([2 9] 1 [02-9] | [2-9] [02-8] 1 | [2-9] [02-8] [02-9]) \ s * \) | ([2-9] 1 [02-9] | [2-9] [02-8] 1 | [2-9] [02-8] [02-9])) \ s * (?: [.-] \ s *)? )? ([2-9] 1 [02-9] | [2-9] [02-9] 1 | [2-9] [02-9] {2}) \ s * (?: [.- ] \ s *)? ([0-9] {4}) (?: \ s * (?: # | x \.? | ext \.? | extension) \ s * (\ d +))? $

Атрибут required

Якщо заданий атрибут required, то, щоб отримати можливість відправити форму, в поле, забезпеченому цим атрибутом, має бути вказано значення. Наприклад, щоб зробити поле поштового індексу обов'язковим для заповнення, потрібно просто додати атрибут required:

<Input type = "text" required pattern = "^ \ d {5,6} (?: [- \ s] \ d {4})? $" ...>

Атрибути min, max і step

Для введення чисельної інформації, такої як номер, діапазон, дата або час, можна вказати мінімальне і максимальне значення, а також крок їх зміни при регулюванні за допомогою повзунка або складального лічильника. Наприклад, для поля введення розміру взуття задається мінімальний розмір 1 і максимальний розмір 13 з кроком зміни 0,5

<Input type = "number" min = "1" max = "13" step = "0.5" ...>

Атрибут maxlength

За допомогою атрибута maxlength можна задавати максимальну довжину введеного значення або текстового поля. Він корисний, коли потрібно обмежити довжину інформації, яку може вказати користувач. Наприклад, якщо довжину імені файлу потрібно обмежити 12 символами, це можна зробити наступним чином.

<Input type = "text" id = "83filename" maxlength = "12" ...>

Атрибут minlength

За допомогою атрибута minlength можна задавати мінімальну довжину введеного значення або текстового поля. Він корисний, коли потрібно вказати мінімальну довжину інформації, яку повинен надати користувач. Наприклад, якщо потрібно вказати, що ім'я файлу повинна складатися мінімум з 8 символів, це можна зробити наступним чином.

<Input type = "text" id = "83filename" minlength = "8" ...>

У деяких випадках можна дозволити користувачеві відправити форму, навіть якщо вона містить помилки. Для цього додайте в елемент форми або окремі поля введення атрибут novalidate. В цьому випадку всі псевдокласи і API-інтерфейси JavaScript все одно дозволять вам перевіряти правильність заповнення форми.

<Form role = "form" novalidate> <label for = "inpEmail"> Email address </ label> <input type = "email" ...> </ form>

Для більш складної перевірки в реальному часі використовуйте JavaScript

Коли вбудованої перевірки і регулярних виразів недостатньо, можна використовувати API-інтерфейс перевірки обмежень - потужний засіб для виконання нестандартної перевірки. За допомогою цього API-інтерфейсу можна, наприклад, поставити нетипову помилкову ситуацію, перевірити коректність елемента і визначити причину, по якій даний елемент є некоректним:

API-інтерфейс Опис setCustomValidity () Задає нестандартне повідомлення про результати перевірки, а властивості customError об'єкта ValidityState привласнює значення true. validationMessage Повертає рядок із зазначенням причини, по якій полі не пройшло перевірку. checkValidity () Повертає значення true, якщо елемент пройшов перевірку по всіх обмежень. В іншому випадку повертається значення false. Визначення реакції сторінки на ситуацію, коли перевірка повертає значення false, залишається за розробником. reportValidity () Повертає значення true, якщо елемент пройшов перевірку по всіх обмежень. В іншому випадку повертається значення false. Коли сторінка повертає значення false, про порушення обмеження повідомляється користувачеві. validity Повертає об'єкт ValidityState, що представляє стану коректності елемента.

Задавайте нестандартні повідомлення про результати перевірки

Якщо поле не проходить перевірку, позначте його як некоректне за допомогою setCustomValidity () і поясніть, у чому полягає помилка. Наприклад, при заповненні реєстраційної форми користувачеві може бути запропоновано для підтвердження його адреси електронної пошти ввести його двічі. Використовуйте подія blur після введення даних у другому полі, щоб перевірити правильність зазначених даних і видати відповідний відповідь. наприклад:

if (input.value! = primaryEmail) {// the provided value does not match the primary email address input.setCustomValidity ( 'The two email addresses must match.'); console.log ( "E-mail addresses do not match", primaryEmail, input.value); } Else {// input is valid - reset the error message input.setCustomValidity ( ''); }

Не дозволяйте відправляти форми з помилками

Оскільки деякі браузери дозволяють користувачу відправляти форми, навіть якщо в них є некоректні дані, необхідно відстежувати подія відправки і за допомогою checkValidity () в елементі форми визначати її коректність. наприклад:

form.addEventListener ( "submit", function (evt) {if (form.checkValidity () === false) {evt.preventDefault (); alert ( "Form is invalid - submission prevented!"); return false;} else {// To prevent data from being sent, we've prevented submission // here, but normally this code block would not exist. evt.preventDefault (); alert ( "Form is valid - submission prevented to protect privacy."); return false;}});

Відображуйте відповідь в реальному часі

Корисно забезпечити кожне поле візуальної підказкою, з тим щоб користувач ще перед відправкою форми бачив, чи правильно він заповнив дане поле. У HTML5 також з'явилося кілька псевдокласів, за допомогою яких поля введення можна оформляти відповідно до їх значеннями або атрибутами.

Пвевдокласс Використання: valid В явному вигляді задає стиль, який буде використовуватися для поля введення, коли вказане в ньому значення відповідає всім вимогам перевірки. : Invalid У явному вигляді задає стиль, який буде використовуватися для поля введення, коли вказане в ньому значення не відповідає всім вимогам перевірки. : Required В явному вигляді задає стиль елемента вводу, для якого задано атрибут required. : Optional В явному вигляді задає стиль елемента вводу, для якого не заданий атрибут required. : In-range В явному вигляді задає стиль елемента вводу числа, значення якого знаходиться в межах діапазону. : Out-of-range В явному вигляді задає стиль елемента вводу числа, значення якого виходить за допустимі.

Перевірка виконується миттєво, а це означає, що, коли сторінка завантажується, поля можуть бути позначені як некоректні, навіть якщо користувач ще не приступав до їх заповнення. Це також означає, що, поки користувач не закінчив вводити інформацію, для оформлення поля може використовуватися стиль, призначений для полів з помилковими даними і вказує на те, що введено невірне значення. Щоб уникнути таких ситуацій можна за допомогою CSS і JavaScript зробити так, щоб стиль, який вказує на помилку, використовувався тільки після того, як користувач перейшов в інше поле.

input.dirty: not (: focus): invalid {background-color: # FFD9D9; } Input.dirty: not (: focus): valid {background-color: # D9FFD9; } Var inputs = document.getElementsByTagName ( "input"); var inputs_len = inputs.length; var addDirtyClass = function (evt) {sampleCompleted ( "Forms-order-dirty"); evt.srcElement.classList.toggle ( "dirty", true); }; for (var i = 0; i <inputs_len; i ++) {var input = inputs [i]; input.addEventListener ( "blur", addDirtyClass); input.addEventListener ( "invalid", addDirtyClass); input.addEventListener ( "valid", addDirtyClass); }