Расширение ActiveForm на стороне клиента

Расширение ActiveForm на стороне клиента

Виджет [[yii\widgets\ActiveForm]] поставляется с набором JavaScript методов, которые используются для проверки на стороне клиента. Его реализация очень гибкая и позволяет расширять его различными способами.

• ActiveForm события
  • beforeValidate
  • afterValidate
  • beforeValidateAttribute
  • afterValidateAttribute
  • beforeSubmit
  • ajaxBeforeSend
  • ajaxComplete
• Отправка формы через AJAX
• Добавления полей динамически

ActiveForm события

ActiveForm запускает серию специальных событий. Используя код, подобный следующему, вы можете подписаться на эти события и обрабатывать их:

$('#contact-form').on('beforeSubmit', function (e) {
	if (!confirm("Everything is correct. Submit?")) {
		return false;
	}
	return true;
});

Ниже мы рассмотрим доступные события.

beforeValidate

beforeValidate запускается перед проверкой всей формы.

Сигнатура обработчика событий должна быть:

function (event, messages, deferreds) {}

где

• event: объект Event
• messages: ассоциативный массив с ключами, являющимися идентификаторами атрибутов, и значениями, являющимися массивами сообщений об ошибках для соответствующих атрибутов
• deferreds: массив отложенных объектов. Вы можете использовать deferreds.add(callback), чтобы добавить новую отложенную проверку

Если обработчик возвращает логическое false, он остановит дальнейшую проверку формы после этого события. И, как результат, событие afterValidate не будет запущено.

afterValidate

afterValidate событие запускается после проверки всей формы.

Сигнатура обработчика события должна быть:

function (event, messages, errorAttributes) {}

где

• event: объект Event
• messages: ассоциативный массив с ключами, являющимися идентификаторами атрибутов, и значениями, являющимися массивами сообщений об ошибках для соответствующих атрибутов
• errorAttributes: массив атрибутов, которые имеют ошибки проверки. Пожалуйста, обратитесь к attributeDefaults для просмотра структуры этого параметра

beforeValidateAttribute

beforeValidateAttribute событие инициируется перед проверкой атрибута.

Сигнатура обработчика события должна быть:

function (event, attribute, messages, deferreds)

где

• event: объект Event
• attribute: атрибут для проверки. Пожалуйста, обратитесь к attributeDefaults для просмотра структуры этого параметра
• messages: массив, в который вы можете добавить сообщения об ошибках проверки для указанного атрибута
• deferreds: массив отложенных объектов. Вы можете использовать deferreds.add (callback), чтобы добавить новую отложенную проверку

Если обработчик возвращает логическое false, он остановит дальнейшую проверку указанного атрибута. И, как результат, событие afterValidateAttribute не будет запущено.

afterValidateAttribute

afterValidateAttribute событие запускается после проверки всей формы и каждого атрибута.

Сигнатура обработчика события должна быть:

function (event, attribute, messages)

где

• event: объект Event
• attribute: проверяемый атрибут. Пожалуйста, обратитесь к attributeDefaults для просмотра структуры этого параметра
• messages: массив, в который вы можете добавить дополнительные сообщения об ошибках валидации для указанного атрибута

beforeSubmit

beforeSubmit событие запускается перед отправкой формы после того, как все проверки пройдены.

Сигнатура обработчика события должна быть:

function (event)

где событие является объектом Event.

Если обработчик возвращает логическое значение false, он остановит отправку формы.

ajaxBeforeSend

ajaxBeforeSend cобытие инициируется перед отправкой AJAX запроса для проверки основанной на AJAX.

Сигнатура обработчика события должна быть:

function (event, jqXHR, settings)

где

• event: объект Event
• jqXHR: объект jqXHR
• settings: настройки для AJAX запроса

ajaxComplete

ajaxComplete событие запускается после выполнения AJAX запроса для проверки основанной на AJAX.

Сигнатура обработчика события должна быть:

function (event, jqXHR, textStatus)

где

• event: объект Event
• jqXHR: объект jqXHR
• textStatus: статус запроса ("success", "notmodified", "error", "timeout", "abort", или "parsererror")

Отправка формы через AJAX

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

var $form = $('#formId');
$form.on('beforeSubmit', function() {
    var data = $form.serialize();
    $.ajax({
        url: $form.attr('action'),
        type: 'POST',
        data: data,
        success: function (data) {
            // Implement successful
        },
        error: function(jqXHR, errMsg) {
            alert(errMsg);
        }
     });
     return false; // prevent default submit
});

Чтобы узнать больше о jQuery функции ajax(), обратитесь к документации Active Record Query documentation.

Добавления полей динамически

В современных веб-приложениях часто возникает необходимость изменения формы после ее отображения пользователю. Это может быть, например, добавление новых полей после нажатия на значок "плюс". Чтобы включить проверку, на стороне клиента, для этих полей, они должны быть зарегистрированы с помощью JavaScript плагина Active Form.

Вы должны добавить само поле, а затем добавить его в список проверки:

$('#contact-form').yiiActiveForm('add', {
    id: 'address',
    name: 'address',
    container: '.field-address',
    input: '#address',
    error: '.help-block',
    validate:  function (attribute, value, messages, deferred, $form) {
        yii.validation.required(value, messages, {message: "Validation Message Here"});
    }
});

Для удаления поля из списка проверки, чтобы оно не было проверено, выполните следующие действия:

$('#contact-form').yiiActiveForm('remove', 'address');

Заберите ссылку на статью к себе, чтобы потом легко её найти!
Раз уж досюда дочитали, то может может есть желание рассказать об этом месте своим друзьям, знакомым и просто мимо проходящим?
Не надо себя сдерживать! ;)