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

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

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

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

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

В каких же случаях они нам помогут? Да всё просто – отслеживание change позволяет обрабатывать такие события, как изменение элементов <select>, <input type="radio"> и прочих. Это потребуется для динамического изменения формы или проверки введённого значения. Отслеживание submit необходимо для проверки правильности заполнения всех полей формы, а также для отправки формы посредством AJAX.

Начнём с последнего, для опыта возьмём форму попроще:

<form action="/users/">
    <input type="text" name="firstname" value="Ivan"/>
    <input type="text" name="lastname" value="Ivanov"/>
    <input type="submit"/>
</form>

И попробуем отправить её по ссылке из «action» посредством AJAX-запроса (для отслеживания события submit можно использовать одноименный «shorthand» метод):

$("form").submit(function(){
    // для читаемости кода
    var $form = $(this);
    // вы же понимаете, о чём я тут толкую?
    // это ведь одна из ипостасей AJAX-запроса 
    $.post(
        $form.attr("action"), // ссылка куда отправляем данные
        $form.serialize()     // данные формы
    );
    // отключаем действие по умолчанию
    return false;
});

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

firstname=Ivan&lastname=Ivanov

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

[
  {
    "name": "firstname",
    "value": "Ivan"
  },
  {
    "name": "lastname",
    "value": "Ivanov"
  }
]

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

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

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

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

if ($form.find("input[name=firstname]").val() === "") {
    alert("Введите имя пользователя");
    return false;
}

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

if ($form.find("input[name=firstname]").val() === "") {
    $form.find("input[name=firstname]")
         .before('<div class="error">Введите имя</div>');
    return false;
}

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

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

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

▷

$('form').submit(function() {
    // для читаемости кода
    var $form = $(this);

    // чистим ошибки
    $form.find('.error').remove();

    // проверяем поле с именем пользователя
    if ($form.find('input[name=firstname]').val() === '') {
        // добавляем текст ошибки
        $form.find('input[name=firstname]')
          .before('<div class="error">Введите имя</div>');
        // прерываем дальнейшую обработку
        return false;
    }

    // всё хорошо – отправляем запрос на сервер
    $.post(
        $form.attr('action'), // ссылка куда отправляем данные
        $form.serialize()     // данные формы
    );

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

Запустите предыдущий пример и попробуйте отправить форму ниже, получившийся AJAX-запрос вы сможете изучить в консоли браузера:

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

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

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

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

Примеры работы данных методов доступны на странице events.form.html.