Перевірка форми на JavaScript, Комп’ютерна документація від А до Я
У цій статті ми почнемо розбиратися з більш складними та функціонально-закінченими скриптами. Пройдемо кроками через всі стадії - починаючи з постановки завдання і закінчуючи універсальним скриптом, готовим до вживання. І почнемо з перевірки форми перед відсиланням на сервер. Загальні міркування та html-код форми
Перевірка форми, мабуть, одна з функцій, що найчастіше застосовуються. Рідкісний сайт обходиться без будь-якої її варіації, будь то просте відсилання повідомлення на e-mail або форма складного замовлення в інтернет-магазині. Користь скрипта очевидна - перевірити, що користувач заповнив усі потрібні поля перед відправкою і цим уникнути проблеми отримання порожніх листів чи відсутності контактної інформації відправника.
* - необхідні для заповнення поля
Зауважте, що на відміну від звичайної форми безпосередньо в тезі, ми відстежуємо подію onsubmit і при його настанні викликаємо функцію перевірки форми sendform().
Чому обрано такий спосіб виклику функції? Адже можна було застосувати, наприклад, подію onclick? Відповідь проста - при використанні події onclick кнопку "submit" доведеться замінити звичайною кнопкою. І, якщо у броузері відключена підтримка javascript, ми зможемо відправити форму (!). Відстеження ж події onsubmit позбавлене цього недоліку, т.к. навіть за відключеної підтримки скриптів форму буде відправлено.
Якщо Ви уважно придивитеся до html-коду нашої форми, то помітите, що поруч із цими полями я поставив зірочку, а наприкінці форми розмістив виноску. Зроблено це, зрозуміло, для зручності та елементарної поваги до користувача.
Функція перевірки форми перед відправкою
А тепер перейдемо до головного - до написання тієї самої функції, що безпосередньо здійснюватиме перевірку форми.Давайте подумаємо, що нам потрібно? Ну, по-перше, перевірити, що потрібні поля заповнені, а по-друге – надіслати форму. У випадку ж, якщо кілька обов'язкових полів порожні, нам потрібно сформувати про це повідомлення користувачеві і перемістити курсор на відповідний елемент.
Для початку напишемо загальну обв'язку функції:
Застосований нами спосіб виклику функції через подію onsubmit як результат роботи функції вимагає повернення одного з логічних значень: true або false. І, залежно від цього значення, форму або буде відправлено, або ні.
спочатку перевіряємо, що це поле є порожнім. І якщо це так, то виводимо повідомлення про помилку за допомогою вбудованої функції alert(). Після того, як користувач зачинить віконце, ми скористаємося методом focus() і перемістимо курсор на помилкове поле. І, нарешті, вийдемо з функції, встановивши прапорець успішності виконання в false. У разі ж, якщо поле, що перевіряється, не було порожнім, то відповідний блок просто пропускається. При пропуску всіх перевірочних блоків функція як результат повертає true, що свідчить про успішну перевірку.
Універсальна функція перевірки
Якщо нам необхідно перевірити всього два чи три поля, то з таким методом перевірки "поодинці" ще можна змиритися, але що якщо їх кілька десятків? Адже таке не рідкість - особливо у складних анкетах. Тому ми трохи модифікуємо нашу функцію, щоб вона не залежала від кількості полів, що перевіряються.
Насамперед ми створимо масив, де перерахуємо імена всіх полів, які вимагають перевірки:
required = new array("name", "email");
Такий підхід дозволить нам дуже легко додавати та модифікувати список обов'язкових полів без безпосередньої зміни коду.самої функції.
Додатково до вищеописаного масиву ми додамо ще один, який міститиме текст помилки для конкретного поля:
Це дозволить нам вільно варіювати текст про помилки та правильно користуватися українською мовою, а не задовольнятися незручними фразами типу "name не введено".
Маючи масив обов'язкових заповнення полів, всю перевірку можна здійснювати циклі. Ось як виглядатиме модифікована функція перевірки:
У циклі відбувається перевірка всіх полів форми на збіг з "обов'язковими". У випадку, якщо збіг відбувся, перевірка здійснюється аналогічно тому, як це було описано вище, але з одним нюансом - введення масиву з повідомленнями про помилки вимагало невеликої модифікації функції alert(), тому тепер помилка безпосередньо залежить від імені поля.
Ось, загалом, і все. Ця функція цілком універсальна і з мінімальними коригуваннями (по суті – вміст двох масивів) може бути адаптована до будь-якої форми.