60% Работа с формами

Формы – это, пожалуй, один из самых нелюбимых элементов на странице – пока настроишь внешний вид, потом еще проверь, что ввели нерадивые пользователи да выведи им информацию о допущенных ошибках, и в конце концов отправляешь на сервер данные с чувством облегчения от проделанной кропотливой работы. Так вот – о том, что поможет в этой самой работе я и буду рассказывать.

Для начала, стоит напомнить события с которыми чаще всего придётся работать:

change — изменение значения элемента

submit — отправка формы

В каких же случаях они нам помогут? Да всё просто – отслеживание change позволяет обрабатывать такие события как изменение selectbox'а, или radiobutton'а, что потребуется для динамического изменения формы. И самый простой пример тому – это на странице регистрации выбор страны, затем по выбранной стране должен быть подгружен список регионов, по региону – список городов и так далее. Отслеживание submit потребуется для проверки правильности заполнения формы, а так же для отправки формы посредством AJAX. Форму возьмём попроще:

<form action="/save/">

<input type="text" name="name" value="Ivan"/> <select name="role">

<option>User</option> <option>Admin</option>

</select>

<input type="submit"/> </form>

А примеры будут идти в обратном порядке, вот отправка формы AJAX'ом по ссылке из action:

$('form').submit(function(){

// чуть позже расскажу подробнее о AJAX $.post(

63

// отключаем действие по умолчанию return false;

});

Вот и первый метод – serialize() – он в ответе за «сбор» данных с формы в удобном для передачи данных формате:

name=Ivan&role=Admin

Так же есть метод serializeArray() –он собранные данные представляет в виде объекта:

[

{

name:"name", value:"Ivan"

},

{

name:"role", value:"Admin"

},

]

Теперь стоит добавить в данный код немного проверки данных:

$('form').submit(function(){

if ($(this).find('input[name=user]').val() == '') { alert('Введите имя пользователя');

return false;

}

//кусок кода с отправкой

//...

});

Вот еще один метод, который нам будет частенько нужен:

val() – получение значения первого элемента формы из выборки val(value) – установка значение всем элементам формы из выборки

64

$select.remove('option');

//преобразуем в multiple

//не забываем, что имя такого селекта, должно быть с [], т.е.

//myselect[], иначе сервер получит, лишь одно значение

$('select').attr('size', $('select option').length

)

$('select').attr('multiple', true)

Хорошо, работать с формой теперь можем, осталось прикрутить более вменяемый вывод ошибок (да-да, за alert() да по рукам):

if ($(this).find('input[name=user]').val() == '') { $(this).find('input[name=user]')

.before('<div class="error">Введите имя</div>'); return false;

}

При повторной отправки формы не забудьте убрать сообщения оставшиеся от предыдущей проверки:

$(this).find('.error').remove()

Теперь можно объединить кусочки кода и получить следующий вариант:

$('form').submit(function(){ // чистим ошибки

$(this).find('.error').remove(); // проверяем поля формы

if ($(this).find('input[type=name]').val() == '') { $(this).find('input[name=user]')

.before('<div class="error">Введите имя</div>'); return false;

}

// всё хорошо – отправляем запрос на сервер $.post(

$(this).attr('action'), // ссылка куда отправляем данные

66

);

return false;

});

Теперь стоит вернуться к списку событий формы, и перечислить недостающие:

focus — фокус на элементе, для работы с данным событием так же есть «shorthand» метод focus(); может потребоваться, если надо вывести подсказку к элементу формы при наведении

blur — фокус ушёл с элемента + метод blur(), для работы с ним; пригодится при валидации формы по мере заполнения полей

select — выбор текста в textarea и input[type=text] + метод select(); если соберётесь разрабатывать свой WYSIWYG, то познакомитесь очень плотно

submit — отправка формы + метод submit(); будете использовать частенько

Примеры работы с элементами формы доступны на странице form.html

Вот так мы и расправились с «ужасными» формами, возможно я ещё приведу несколько примеров из реальной жизни, но это будет уже в последующих версиях данного учебника :)

67