Yii2 AJAX校验场景下多属性联合校验如何同步显示错误

问题描述 #

• 曾参考Yii2 Cookbook中的多属性联合校验方案开发，该方案随Yii2版本迭代已失效，暂未找到可直接适配的可用版本。
• 现有需求为对两个值为字符串数组的属性做互斥唯一性校验，目前校验逻辑本身可正常执行，但无法实现两个属性的错误提示同步展示/清除。
• 先后尝试自定义校验器类、行内校验器两种实现方式，均存在相同问题：开启AJAX校验的表单录入数据时，仅当前正在编辑的属性会更新错误提示，另一个属性的错误状态不会同步变更。
• 预期效果：编辑两个属性中的任意一个时，两个属性的校验错误都能同步展示，当前无法正常生效的最简示例代码如下：

public function rules()
{
    return [
        [['attribute1', 'attribute2'], 'customValidator'],
    ];
}

// 自定义校验方法
public function customValidator($attribute, $params)
{
    $this->addError('attribute1', 'error');
    $this->addError('attribute2', 'error');
}

问题原因 #

Yii2默认的AJAX校验链路存在两层过滤逻辑，会导致非当前触发字段的错误被忽略：

1. 后端控制器处理AJAX校验请求时，若调用ActiveForm::validate()时传入了当前请求携带的触发字段参数，方法只会返回对应字段的错误，其他字段的错误会被直接过滤。
2. 前端ActiveForm内置脚本默认仅处理当前触发校验字段的错误渲染/清除，哪怕后端返回了其他字段的错误，也不会自动更新对应字段的提示状态。

修复方案 #

1. 调整后端AJAX校验返回逻辑 #

控制器中处理AJAX校验的代码不要传入属性过滤参数，直接返回模型全量校验错误，示例代码：

use yii\web\Response;
use yii\widgets\ActiveForm;

if (Yii::$app->request->isAjax && $model->load(Yii::$app->request->post())) {
    Yii::$app->response->format = Response::FORMAT_JSON;
    // *注意：不要给ActiveForm::validate传第二个属性过滤参数，否则会过滤非触发字段的错误
    return ActiveForm::validate($model);
}

现有模型层的自定义校验逻辑不需要改动，给两个属性同时调用addError的写法是正确的。

2. 补充前端错误同步逻辑 #

在视图层给表单绑定afterValidate事件，收到校验响应后手动同步两个关联字段的错误状态，示例代码：

<?php $form = ActiveForm::begin([
    'id' => 'demo-form',
    'enableAjaxValidation' => true,
]); ?>
<!-- 表单字段、提交按钮等内容 -->
<?php ActiveForm::end(); ?>

<?php
$this->registerJs(<<<JS
$('#demo-form').on('afterValidate', function(e, messages) {
    // 同步更新两个关联字段的错误状态
    const attr1Errors = messages.attribute1 || [];
    const attr2Errors = messages.attribute2 || [];
    $(this).yiiActiveForm('updateAttribute', 'attribute1', attr1Errors);
    $(this).yiiActiveForm('updateAttribute', 'attribute2', attr2Errors);
});
JS);
?>

调整完成后，编辑任意一个属性触发AJAX校验时，两个属性的错误提示都会同步展示或清除，符合预期效果。

内容的提问来源于stack exchange，提问作者Duncan Connolly