透過 JavaScript 操作 ActiveForm（Working with ActiveForm via JavaScript）

一般來說，在 Yii 2.0 官方教學說明很詳盡的，在PHP端處理ActiveForm的方式，已經能滿足絕大多數的網頁需求了 。

不過，如果要再更進一步，比方說動態的增減欄位，或者在某些狀況下，觸發特定欄位的驗證檢查。這種狀況就有點棘手了。

這邊我們介紹 ActiveForm 的 JavaScript API，以處理上述這類需求。

1. 準備

這裡我們使用基本 Yii 來示範，所以需要先安裝 Yii。

2. 對單一欄位觸發驗證

$('#contact-form').yiiActiveForm('validateAttribute', 'contactform-name');

3. 對整個表單觸發驗證

$('#contact-form').yiiActiveForm('validate', true);

第二個欄位設置為true，會使整張表單都需要驗證。

4. 使用事件

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

可用的事件有：

• beforeValidate
• afterValidate
• beforeValidateAttribute
• afterValidateAttribute
• beforeSubmit
• ajaxBeforeSend
• ajaxComplete .

5. 動態增減欄位

在驗證清單裡面增加欄位：

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

6. 更新單一參數的錯誤資訊

對單一參數新增錯誤資訊：

$('#contact-form').yiiActiveForm('updateAttribute', 'contactform-subject', ["I have an error..."]);

移除該錯誤資訊：

$('#contact-form').yiiActiveForm('updateAttribute', 'contactform-subject', '');

7. 更新錯誤資訊或摘要

$('#contact-form').yiiActiveForm('updateMessages', {
    'contactform-subject': ['Really?'],
    'contactform-email': ['I don\'t like it!']
}, true);

最後一個參數指示出我們是否要更新摘要。

8. 監控參數改變

監控參數改變的事件，比方說選項按鈕被點選……等，可以使用以下程式碼：

$("#attribute-id").on('change.yii',function(){
        //your code here
});

9. 取得參數的值

要與第三方元件相容，取得參數的值最好方法是：

$('#form_id').yiiActiveForm('find', '#attribute').value

10. 自定義驗證

根據狀況，如果我們需要透過 JavaScript 修改參數的驗證，可以使用規則的whenClient參數。

不過，假設我們需要純客戶端的驗證方式，可以用：

$('#form_id').on('beforeValidate', function (e) {
            $('#form_id').yiiActiveForm('find', '#attribute').validate = function (attribute, value, messages, deferred, $form) {
                //自定義驗證程式碼
            }
        return true;
    });