Расширение ActiveForm на стороне клиента
Виджет [[yii\widgets\ActiveForm]] поставляется с набором JavaScript методов, которые используются для проверки на стороне клиента. Его реализация очень гибкая и позволяет расширять его различными способами.
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: объектEventmessages: ассоциативный массив с ключами, являющимися идентификаторами атрибутов, и значениями, являющимися массивами сообщений об ошибках для соответствующих атрибутовdeferreds: массив отложенных объектов. Вы можете использоватьdeferreds.add(callback), чтобы добавить новую отложенную проверку
Если обработчик возвращает логическое false, он остановит дальнейшую проверку формы после этого события. И, как результат, событие afterValidate не будет запущено.
afterValidate
afterValidate событие запускается после проверки всей формы.
Сигнатура обработчика события должна быть:
function (event, messages, errorAttributes) {}где
event: объектEventmessages: ассоциативный массив с ключами, являющимися идентификаторами атрибутов, и значениями, являющимися массивами сообщений об ошибках для соответствующих атрибутовerrorAttributes: массив атрибутов, которые имеют ошибки проверки. Пожалуйста, обратитесь кattributeDefaultsдля просмотра структуры этого параметра
beforeValidateAttribute
beforeValidateAttribute событие инициируется перед проверкой атрибута.
Сигнатура обработчика события должна быть:
function (event, attribute, messages, deferreds)где
event: объектEventattribute: атрибут для проверки. Пожалуйста, обратитесь кattributeDefaultsдля просмотра структуры этого параметраmessages: массив, в который вы можете добавить сообщения об ошибках проверки для указанного атрибутаdeferreds: массив отложенных объектов. Вы можете использоватьdeferreds.add (callback), чтобы добавить новую отложенную проверку
Если обработчик возвращает логическое false, он остановит дальнейшую проверку указанного атрибута. И, как результат, событие afterValidateAttribute не будет запущено.
afterValidateAttribute
afterValidateAttribute событие запускается после проверки всей формы и каждого атрибута.
Сигнатура обработчика события должна быть:
function (event, attribute, messages)где
event: объектEventattribute: проверяемый атрибут. Пожалуйста, обратитесь кattributeDefaultsдля просмотра структуры этого параметраmessages: массив, в который вы можете добавить дополнительные сообщения об ошибках валидации для указанного атрибута
beforeSubmit
beforeSubmit событие запускается перед отправкой формы после того, как все проверки пройдены.
Сигнатура обработчика события должна быть:
function (event)где событие является объектом Event.
Если обработчик возвращает логическое значение false, он остановит отправку формы.
ajaxBeforeSend
ajaxBeforeSend cобытие инициируется перед отправкой AJAX запроса для проверки основанной на AJAX.
Сигнатура обработчика события должна быть:
function (event, jqXHR, settings)где
event: объектEventjqXHR: объектjqXHRsettings: настройки для AJAX запроса
ajaxComplete
ajaxComplete событие запускается после выполнения AJAX запроса для проверки основанной на AJAX.
Сигнатура обработчика события должна быть:
function (event, jqXHR, textStatus)где
event: объектEventjqXHR: объектjqXHRtextStatus: статус запроса ("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');
