Работа с содержимым форм

Cash — это легковесная библиотека для работы с DOM в стиле jQuery. Она предоставляет удобные методы для управления элементами форм, их значениями и событиями. Несмотря на минимальный размер, функциональность Cash позволяет эффективно работать с формами практически так же, как в jQuery, сохраняя при этом высокую производительность.

Получение и установка значений полей

Метод val() является центральным для работы со значениями форм. Он позволяет как получать текущее значение элемента формы, так и задавать новое.

Пример получения значения:

let inputValue = $('#username').val();
console.log(inputValue);

Пример установки значения:

$('#username').val('Иван Иванов');

Метод поддерживает множественные селекторы и массив элементов. При передаче функции val() можно динамически вычислять значение для каждого элемента:

$('input[type="text"]').val((index, currentValue) => currentValue.toUpperCase());

Работа с флажками и радиокнопками

Для checkbox и radio важно использовать метод prop() для проверки состояния checked.

Пример чтения состояния:

let isChecked = $('#agree').prop('checked');
console.log(isChecked);

Пример установки состояния:

$('#agree').prop('checked', true);

Для множественных элементов можно использовать селектор группы и метод each():

$('input[name="options"]').each((i, el) => {
    $(el).prop('checked', false);
});

Работа с селектами

Метод val() применяется и для <select> элементов. Он поддерживает как одиночные, так и множественные выборы.

Одиночный выбор:

$('#country').val('ru');

Множественный выбор:

$('#languages').val(['ru', 'en']);

Для получения выбранного значения используется тот же метод:

let selected = $('#languages').val(); // вернет массив выбранных значений

События форм

Cash поддерживает привязку событий через метод on(). Для форм особенно актуальны события submit, input и change.

Отслеживание изменения значения поля:

$('#username').on('input', e => {
    console.log(e.target.value);
});

Обработка отправки формы:

$('#form').on('submit', e => {
    e.preventDefault(); // предотвращает стандартную отправку
    console.log('Форма отправлена');
});

Использование change удобно для <select> и checkbox:

$('input[type="checkbox"]').on('change', e => {
    console.log(e.target.checked);
});

Сброс формы

Cash позволяет легко сбросить форму до исходного состояния с помощью стандартного DOM-метода reset():

$('#form')[0].reset();

Важно помнить, что метод reset() применяется к DOM-элементу, а не к объекту Cash напрямую, поэтому используется [0] для доступа к первому элементу выборки.

Валидация и кастомные проверки

Хотя Cash не предоставляет встроенной системы валидации, её можно реализовать с использованием событий форм и методов работы с полями.

Пример простой валидации:

$('#form').on('submit', e => {
    e.preventDefault();
    let username = $('#username').val();
    if (!username.trim()) {
        alert('Поле username не может быть пустым');
    }
});

С помощью each() можно проверять сразу несколько полей:

$('#form input').each((i, el) => {
    if (!$(el).val()) {
        console.warn(`Поле ${el.name} пустое`);
    }
});

Динамическое управление формами

Cash позволяет добавлять и удалять поля форм динамически, управлять атрибутами и классами для отображения ошибок или подсветки:

// Добавление нового поля
$('#form').append('<input type="text" name="newField" />');

// Добавление класса ошибки
$('#username').addClass('error');

// Удаление класса ошибки
$('#username').removeClass('error');

// Изменение атрибута placeholder
$('#username').attr('placeholder', 'Введите имя');

Интерактивное управление формами

Объединение методов событий и работы с DOM позволяет создавать интерактивные формы. Например, скрывать поля в зависимости от состояния других элементов:

$('#subscribe').on('change', e => {
    if (e.target.checked) {
        $('#email').show();
    } else {
        $('#email').hide();
    }
});

С помощью toggle() можно переключать видимость элементов более элегантно:

$('#subscribe').on('change', e => {
    $('#email').toggle(e.target.checked);
});

Вывод значений формы в объект

Для передачи данных на сервер или для обработки в JavaScript удобно собирать значения всех полей в объект:

let formData = {};
$('#form input, #form select').each((i, el) => {
    let $el = $(el);
    formData[$el.attr('name')] = $el.val();
});
console.log(formData);

Такой подход позволяет легко сериализовать форму и работать с данными в дальнейшем.

Cash предоставляет полный набор инструментов для управления формами: получение и установка значений, работа с чекбоксами и радиокнопками, обработка событий, динамическое добавление и удаление элементов. Методы val(), prop(), attr(), on() и each() формируют основу для любой работы с формами, делая код компактным и читабельным.

Оглавление