クライアント側での 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：Event オブジェクト。
• messages：キーが属性 ID、値が対応する属性のエラーメッセージ配列である連想配列。
• deferreds：Deferred オブジェクトの配列。deferreds.add(callback) を使用して、新しい遅延検証を追加できます。

ハンドラがブール値 false を返した場合、このイベント後のフォーム検証は停止します。その結果、afterValidate イベントはトリガーされません。

afterValidate ¶

afterValidate イベントは、フォーム全体の検証後にトリガーされます。

イベントハンドラのシグネチャは次のようになります。

function (event, messages, errorAttributes)

ここで、

• event：Event オブジェクト。
• messages：キーが属性 ID、値が対応する属性のエラーメッセージ配列である連想配列。
• errorAttributes：検証エラーが発生した属性の配列。このパラメータの構造については、attributeDefaults を参照してください。

beforeValidateAttribute ¶

beforeValidateAttribute イベントは、属性の検証前にトリガーされます。イベントハンドラのシグネチャは次のようになります。

function (event, attribute, messages, deferreds)

ここで、

• event：Event オブジェクト。
• attribute：検証対象の属性。このパラメータの構造については、attributeDefaults を参照してください。
• messages：指定された属性の検証エラーメッセージを追加できる配列。
• deferreds：Deferred オブジェクトの配列。deferreds.add(callback) を使用して、新しい遅延検証を追加できます。

ハンドラがブール値 false を返した場合、指定された属性のそれ以降の検証は停止します。その結果、afterValidateAttribute イベントはトリガーされません。

afterValidateAttribute ¶

afterValidateAttribute イベントは、フォーム全体および各属性の検証後にトリガーされます。

イベントハンドラのシグネチャは次のようになります。

function (event, attribute, messages)

ここで、

• event：Event オブジェクト。
• attribute：検証されている属性。このパラメータの構造については、attributeDefaults を参照してください。
• messages：指定された属性の追加の検証エラーメッセージを追加できる配列。

beforeSubmit ¶

beforeSubmit イベントは、すべての検証が完了した後、フォームを送信する前にトリガーされます。

イベントハンドラのシグネチャは次のようになります。

function (event)

ここで、event は Event オブジェクトです。

ハンドラがブール値 false を返した場合、フォームの送信は停止します。

ajaxBeforeSend ¶

ajaxBeforeSend イベントは、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）リクエストとして行われます。フォームを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()関数について詳しくは、jQueryドキュメントを参照してください。

動的なフィールドの追加 ¶

現代のWebアプリケーションでは、ユーザーに表示された後にフォームを変更する必要がしばしばあります。例えば、「プラス」アイコンをクリックした後に新しいフィールドを追加する場合などです。これらのフィールドに対してクライアントバリデーションを有効にするには、ActiveForm JavaScriptプラグインに登録する必要があります。

フィールド自体を追加してから、バリデーションリストに追加する必要があります。

$('#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');