_×

SubmitForm - простой jQuery плагин для порверки формы

jQuery валидация формы

SubmitForm - простой и удобный jQuery-плагин, позволяющий легко настроить проверку любой формы перед отправкой данных на сервер. Это плагин позволяет проверить поле формы на наличие введенных данных, на соответствие формату e-mail и телефона.

Подключается плагин как и все остальные javascript-скрипты:

  <script src="/script/jquery.submitForm.js"></script>

Инициализация плагина происходит как и всех jQuery-плагинов на конкретном элементе, в нашем случае формы, с указанием определенных параметров:

  <script>
    $(document).ready(function(){
      $('#form').submitForm({
        //параметры вызова
      });
    });
  </script>

Параметры, доступные в текущей версии плагина:

- source - url обработчика запроса - адрес страницы куда будут отправлены данные ajax-запросом. Обязательный параметр

- method - метод отправки данных ajax запросом на сервер (GET, POST). По умолчанию - POST

- processingElement - DOM-элемент - элемент для отображения processing-состояния формы. По умолчанию - div с классом "submit-form-processing"

- responseElement - DOM-элемент - элемент для отображения результат ответа сервераю. По умолчанию - div с классом "submit-form-response"

- onBeforeSend - функция обработчик события, происходящего перед отправкой формой. По умолчанию - функция установки класса processing-состояния формы

- onSuccess - функция обработчик события, происходящего при успешном завершении запроса и получении ответа от сервера. По умолчанию - функция установки класса success-состояния формы и вывода ответа в responseElement

- onError - функция обработчик события, происходящего при ошибке выполнения запроса. По умолчанию - функция установки класса error-состояния формы и вывода статуса или кода ошибки responseElement

- success - helper-функция, выполняемая при onSuccess

Валидаторы или функции проверки данных, доступные в текущей версии плагина:

- required - поле обязательно для заполнения

- phone - данные должны соответствовать фомату телефона. Для ввода доступны символы 0-9 + - и не короче 6 символов. Пример +7-912-345-6789

- email - данные должны соответствовать фомату e-mail. Пример mail@mail.ru

Разметка формы для работы плагина

<form id="form">
  <input name="name" type="text" data-validate="required"/>
  <input name="emil" type="text" data-validate="required, email"/> 
  <input name="phone" type="text" data-validate="required, phone"/> 
  <input type="submit" value="Отправить" />
</form>

Как видно из примера, функции проверки (валидаторы) указываются в атрибуте data-validate

Логика работы плагина

После нажатия кнопки Отправить, происходит проверка данных полей на соответсвие форматам их валидаторов. Если данные не подходят по формату, то этому полю устанавливается класс invalid, а форме устанавливается класс вида invalid - имя сработанного валидатора.

Если форма проходит валидацию, то выполняется ajax-запрос с отправкой данных методом method на source. Перед отправкой выполняется функция onBeforeSend, которая по умолчанию устанавливает класс processing форме. Если запрос выполнен успешно, то выполняется функция onSuccess, в которой снимается с фaрмы класс processing и устанавливается класс success. Здесь же происходит вывод ответа от сервера в responseElement. Также в onSuccess выполняется helper-функция success, в которой вы можете сделать любые действия с response.

При возникновении ошибки отрабывает функция onError в которой форме устанавливается класс error и происходит вывод ошибки в responseElement.

Функциям onBeforeSend, onSuccess, onError доступны все параметры аналогичных функций beforeSend, success, error ajax объекта jQuery http://api.jquery.com/jquery.ajax/

С помощью устанавливаемых плагином классов invalid, success, error, processing вы через CSS стили можете различными стилями оповещать пользователя об ошибках формы, успешном завершении и процесе отправки формы.

Пример инициализации плагина

  <script>
    $(document).ready(function(){
      $('#form').submitForm({
        source: '/save.html',
        processingElement: $('.form-processing'),
        responseElement: $('.form') //т.е. ответ сервера заменит 
        контент формы
      });
    });
  </script>

Пример формы

<form id="form" class="form>
  <input name="name" type="text" data-validate="required"/>
  <input name="emil" type="text" data-validate="required, email"/> 
  <input name="phone" type="text" data-validate="required, phone"/> 
  <input type="submit" value="Отправить" />
  <div class="form-processing"></div>
</form>

Пример стилей

  .form
  {
    position: relative;
  }
  
  .invalid
  {
    border: 2px solid red !important;
  }
  
  .form-processing
  {
    display: none;
    background: rgba(255, 255, 255, 0.7) url(loading.gif) 
    background-repeat: no-repeat;
    background-position: center center;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
  
  form.processing .form-processing
  {
    display: block;
  }
Сcылка на скачивание плагина

Теги: jquery 31.05.2014