Превращение вебформы в мастер заполнения с помощью jQuery

By masster

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

Скачать
Демо

Задача

Если вы по какой либо причине должны иметь на сайте большую форму для заполнения с большим количеством полей, то ее следует семантически разбить на отдельные группы полей (fieldsets). Каждая такая группа полей должна иметь четкое и ясное название. И хотя множество примеров в инете сегодня выглядят совершенно по разному, этому правилу все же надо стараться следовать.

Таким образом можно сказать, что каждая группа полей представляет собой подзадачу одной более большой задачи - заполнения вебформы. Следовательно, каждая подзадача может стать логическим шагом со своим названием (или описанием), полями ввода и навигацией “вперед” и “назад”, являющейся отличительной чертой мастера (визарда) заполнения форм. Весь процесс заполнения форм разбивается на несколько простых шагов.

Создаем “шаги”

    

        <-- поля ввода -->
    
    

        <-- поля ввода  -->
    
    

        <-- поля ввода  -->
    

Теперь поясним код, приведенный ниже. Чтобы определить, сколько должно быть шагов, нам необходимо выделить все группы полей (fieldsets) и получить размер этого набора групп полей. Затем мы проходим по этому набору (который возвращает как раз все группы полей), чтобы определить количество шагов. Каждую группу полей мы с помощью jQuery на лету помещаем в слой (div) и присоединяем к нему HTML элементы “параграф”(<p></p>), которые как раз и будут кнопками “веред” и “назад”.
Read more »

Лучшие плагины jQuery для работы с формами (часть 2)

By masster

AlphaNumeric

С помощью этого плагина вы легко сможете наложить ограничения на символы, вводимые пользователем в поля ввода. Эти правила задаются как параметры настройки плагина. Например, если вы хотите ограничить ввод только буквенными символами, подчеркиванием и цифрами - например, в поле ввода имени пользователя, то вы просто добавляете вот такую строчку кода:

$('.sample_calss').alphanumeric();

Здесь подразумевается, что стиль CSS поля ввода относится к классу sample_class:

Теперь пользователь не сможет ввести в этом поле текст <script>

ToggleVal

Назначение этого очень полезногоплагина - очищать поле ввода, задаваемое по умолчанию ( например, “Введите дату…”), при получении фокуса этим полем (например, при щелчке мышью, когла в поле ввода появляется курсор)
Кроме того, он умеет распознавать лэйблы (label) и использовать текст, заключенный между ними, в качестве текста в поле ввода. Если после получения фокуса стиль поля ввода должен меняться - то это тоже легко настраивается.

Input Verfication

Этот плагин помогает наладить проверку данных, которые вводит пользователь
Скачать