在客戶端擴展 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 提交，您可以透過以下方式處理表單的 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');