在客户端扩展 ActiveForm ¶

The 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');