6.2 KiB
Rozszerzanie ActiveForm po stronie klienta
Widżet yii\widgets\ActiveForm posiada szereg wbudowanych metod JavaScript, służących do walidacji po stronie klienta. Ich implementacja jest bardzo elastyczna i pozwala na rozszerzanie ich na wiele sposobów.
Zdarzenia ActiveForm
ActiveForm wyzwala serie dedykowanych zdarzeń. Używając poniższego kodu, można przechwycić te zdarzenia i je obsłużyć:
$('#contact-form').on('beforeSubmit', function (e) {
if (!confirm("Wszystko jest w porządku. Wysłać formularz?")) {
return false;
}
return true;
});
Poniżej znajdziesz opis dostępnych zdarzeń.
beforeValidate
beforeValidate
jest wyzwalane przed walidacją całego formularza.
Sygnatura metody obsługującej to zdarzenie powinna wyglądać następująco:
function (event, messages, deferreds)
gdzie
event
: obiekt Event.messages
: asocjacyjna tablica, gdzie kluczami są ID atrybutów, a wartościami tablice opisów błędów dla tych atrybutów.deferreds
: tablica obiektów kolejkujących. Możesz użyćdeferreds.add(callback)
, aby dodać nową walidację do kolejki.
Jeśli metoda obsługująca zwróci boolean false
, zatrzyma dalszą walidację formularza. W takim wypadku zdarzenie
afterValidate
nie będzie już wyzwalane.
afterValidate
afterValidate
jest wyzwalane po walidacji całego formularza.
Sygnatura metody obsługującej to zdarzenie powinna wyglądać następująco:
function (event, messages, errorAttributes)
gdzie
event
: obiekt Event.messages
: asocjacyjna tablica, gdzie kluczami są ID atrybutów, a wartościami tablice opisów błędów dla tych atrybutów.errorAttributes
: tablica atrybutów z błędami walidacji. Sprawdź konstrukcjęattributeDefaults
, aby dowiedzieć się więcej o strukturze tego parametru.
beforeValidateAttribute
beforeValidateAttribute
jest wyzwalane przed walidacją atrybutu.
Sygnatura metody obsługującej to zdarzenie powinna wyglądać następująco:
function (event, attribute, messages, deferreds)
gdzie
event
: obiekt Event.attribute
: atrybut poddawany walidacji. Sprawdź konstrukcjęattributeDefaults
, aby dowiedzieć się więcej o strukturze tego parametru.messages
: tablica, do której możesz dodać opisy błędów walidacji dla wybranego atrybutu.deferreds
: tablica obiektów kolejki. Możesz użyćdeferreds.add(callback)
, aby dodać nową walidację do kolejki.
Jeśli metoda obsługująca zwróci boolean false
, zatrzyma dalszą walidację wybranego atrybutu. W takim wypadku zdarzenie
afterValidateAttribute
nie będzie już wyzwalane.
afterValidateAttribute
afterValidateAttribute
jest wyzwalane po walidacji całego formularza i każdego atrybutu.
Sygnatura metody obsługującej to zdarzenie powinna wyglądać następująco:
function (event, attribute, messages)
gdzie
event
: obiekt Event.attribute
: atrybut poddawany walidacji. Sprawdź konstrukcjęattributeDefaults
, aby dowiedzieć się więcej o strukturze tego parametru.messages
: tablica, do której możesz dodać opisy błędów walidacji dla wybranego atrybutu.
beforeSubmit
beforeSubmit
jest wyzwalane przed wysłaniem formularza, po pomyślnej walidacji.
Sygnatura metody obsługującej to zdarzenie powinna wyglądać następująco:
function (event)
gdzie event jest obiektem Event.
Jeśli metoda obsługująca zwróci boolean false
, zatrzyma wysyłanie formularza.
ajaxBeforeSend
ajaxBeforeSend
jest wyzwalane przed wysłaniem żądania AJAX w przypadku walidacji AJAX-owej.
Sygnatura metody obsługującej to zdarzenie powinna wyglądać następująco:
function (event, jqXHR, settings)
gdzie
event
: obiekt Event.jqXHR
: obiekt jqXHR.settings
: konfiguracja żądania AJAX.
ajaxComplete
ajaxComplete
jest wyzwalane po ukończeniu żądania AJAX w przypadku walidacji AJAX-owej.
Sygnatura metody obsługującej to zdarzenie powinna wyglądać następująco:
function (event, jqXHR, textStatus)
gdzie
event
: obiekt Event.jqXHR
: obiekt jqXHR.textStatus
: status żądania ("success", "notmodified", "error", "timeout", "abort" lub "parsererror").
Wysyłanie formularza za pomocą AJAX
Walidacja może być przeprowadzona po stronie klienta lub za pomocą AJAX-a, ale wysyłanie formularza jest domyślnie przeprowadzane
za pomocą zwyczajnego żądania. Jeśli chcesz przesłać formularz za pomocą AJAX, możesz to zrobić obsługując zdarzenie beforeSubmit
formularza w następujący sposób:
var $form = $('#formId');
$form.on('beforeSubmit', function() {
var data = $form.serialize();
$.ajax({
url: $form.attr('action'),
type: 'POST',
data: data,
success: function (data) {
// Implementacja pomyślnego statusu
},
error: function(jqXHR, errMsg) {
alert(errMsg);
}
});
return false; // powstrzymuje przed domyślnym sposobem wysłania
});
Aby dowiedzieć się więcej o funkcji jQuery ajax()
, zapoznaj się z dokumentacją jQuery.
Dynamiczne dodawanie pól
We współczesnych aplikacjach webowych często koniecznie jest modyfikowanie formularza już po tym, jak został zaprezentowany użytkownikowi. Dla przykładu może to być dodawanie nowego pola po kliknięciu w ikonę "z plusem". Aby uruchomić walidację takich pól, należy je zarejestrować za pomocą JavaScriptowego pluginu ActiveForm.
Po dodaniu pola do formularza, należy dołączyć je również do listy walidacji:
$('#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: "Informacja dotycząca walidacji tutaj"});
}
});
Aby usunąć pole z listy walidacji (aby nie było już sprawdzane), możesz wykonać następujący kod:
$('#contact-form').yiiActiveForm('remove', 'address');