Перевірка форми на JavaScript, HTML, XML, DHTML, Інтернет-технології, статті

У цій статті ми почнемо розбиратися з більш складними і функціонально-закінченими скриптами. Пройдемо по кроках через всі стадії – починаючи з постановки завдання і закінчуючи універсальним скриптом, готовим до вживання. І почнемо з перевірки форми перед відсиланням на сервер.
Загальні міркування і html-код форми

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


Припустимо, що форма у нас вже є і складається з наступних 4-х полів: ім’я, електронна адреса, тема повідомлення і безпосередньо саме повідомлення. Відповідний html-код для такої форми буде виглядати приблизно так:


<form action=”/cgi-bin/formmail.cgi” onsubmit=”return sendform();”>


Ваше ім’я: * <input type=”text” name=”name”><br>
Електронна адреса: * <input type=”text” name=”email”><br>
Тема повідомлення: <input type=”text” name=”subject”><br>
Повідомлення: <textarea name=”message”></textarea><br><br>


<input type=”submit” value= “Відправити”>
<input type=”reset” value= “Очистити”>


</form>


* – Необхідні для заповнення поля


Зауважте, що на відміну від звичайної форми безпосередньо в теге <form> Ми відстежуємо подія onsubmit і при його настанні викликаємо функцію перевірки форми sendform().


Чому обрано саме такий спосіб виклику функції? Адже можна було застосувати, наприклад, подія onclick? Відповідь проста – при використанні події onclick кнопку “submit” доведеться замінити звичайною кнопкою. І, у випадку, якщо в броузері відключена підтримка javascript, Ми не зможемо відправити форму (!). Відстеження ж події onsubmit позбавлене цього недоліку, тому що навіть при відключеній підтримці скриптів форма буде відправлена.


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


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


Функція перевірки форми перед відправкою


А тепер перейдемо до головного – до написання тієї самої функції, що буде безпосередньо здійснювати перевірку форми. Давайте подумаємо, що нам від неї вимагається? Ну, по-перше, перевірити, що потрібні поля заповнені, а по-друге – відіслати форму. У разі ж, якщо декілька з обов’язкових полів порожні, нам потрібно сформувати про це повідомлення користувачеві і перемістити курсор на відповідний елемент.


Для початку напишемо загальну обв’язку функції:


<script language=”javascript“>
<!–


function sendform() {


/ / Тут ми розмістимо код функції


return true;
}


//–>


</script>


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


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


<script language=”javascript“>
<!–


function sendform() {


if (document.forms[0].name.value == “”) {
alert (“Будь ласка, введіть Ваше ім’я”);
document.mailform.name.focus();
return false
}


if (document.forms[0].email.value == “”) {
alert (“Будь ласка, введіть електронну адресу”);
document.mailform.email.focus();
return false
}


return true;
}


//–>


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


спочатку перевіряємо, що дане поле є порожнім. І якщо це так, то
виводимо повідомлення про помилку за допомогою вбудованої функції alert (). Після того, як користувач закриє віконце, ми
скористаємося методом focus () і перемістимо курсор на помилкове поле. І, нарешті,
вийдемо з функції, встановивши прапорець успішності виконання в false.
У разі ж, якщо перевіряється поле не було порожнім, то відповідний блок просто пропускається. При пропуску всіх перевірочних блоків функція в якості результату повертає true, що свідчить про успішної перевірці.


Універсальна функція перевірки


Якщо нам необхідно перевірити всього два або три поля, то з таким методом перевірки “по-одиночці” ще можна змиритися, але що, якщо їх декілька десятків? Адже таке не рідкість – особливо в складних анкетах. Тому ми трохи модифікуємо нашу функцію, щоб вона не залежала від кількості перевірених полів.


Насамперед ми створимо масив, де перерахуємо імена всіх полів, які вимагають перевірки:


required = new array(“name”, “email”);


Такий підхід дозволить нам дуже легко додавати і модифікувати список обов’язкових полів без безпосередньої зміни коду самої функції.


Додатково до вищеописаного масиву ми додамо ще один, який буде містити текст помилки для конкретного поля:


required_show = new array (“Ваше ім’я”, “електронну адресу”);


Це дозволить нам вільно варіювати текст про помилки і правильно користуватися російською мовою, а не задовольнятися нестравними фразами типу “name не введений”.


Маючи масив обов’язкових для заповнення полів, всю перевірку можна здійснювати в циклі. Ось як буде виглядати модифікована функція перевірки:


<script language=”javascript“>
<!–


required = new array(“name”, “email”);
required_show = new array (“Ваше ім’я”, “електронну адресу”);


function sendform () {


var i, j;


for(j=0; j<required.length; j++) {
for (i=0; i<document.forms[0].length; i++) {
if (document.forms[0].elements[i].name == required[j] && document.forms[0].elements[i].value == “” ) {
alert (“Будь ласка, введіть” + required_show [j]);
document.forms[0].elements[i].focus();
return false;
}
}
}


return true;
}


//–>


</script>


У циклі відбувається перевірка всіх полів форми на збіг з “обов’язковими”. У випадку, якщо збіг сталося, перевірка здійснюється аналогічно тому, як це було описано вище, але з одним нюансом – Введення масиву з повідомленнями про помилки зажадало невеликої модифікації функції alert (), так що тепер текст помилки безпосередньо залежить від імені поля.


Ось, загалом-то, і все. Ця функція цілком універсальна і з мінімальними коректуваннями (по суті – вміст двох масивів) може бути адаптована до будь-якій формі.


Схожі статті:


Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*