Yii2 ActiveForm：在表单顶部或 errorSummary() 中显示 Ajax 验证响应

Question

我正在使用 ActiveForm，我需要在不靠近输入字段而是在表单顶部显示验证错误。

如下示例代码所示，设置errorOptions可以避免在默认位置显示错误信息。

Ajax 验证正在运行，但 $form->errorSummary($model) 没有显示任何消息，即使 here 看起来应该如此，而在 documentation 中我找不到明确的答案。

另外，添加 Html::error($model, 'username') 对 Ajax 验证没有帮助。

<?php
    $form = ActiveForm::begin([
        'id' => 'test-form',
        'options' => ['class' => 'form-horizontal'],
        'enableAjaxValidation' => true,
        'enableClientValidation' => true,
    ]) 
?>

<?= $form->errorSummary($model) ?>
<?= Html::error($model, 'username') ?>

<div class="form-row"> 
    <div class="form-group col-md-3">
        <?= $form->field($model, 'username', ['errorOptions' => ['tag' => false]])->textInput()->label("Username") ?>
    </div>
</div>

<?php ActiveForm::end() ?>

在 Yii1.1 中，验证错误可以以更灵活的方式显示，因为您可以单独定义 label、input 和 error。像这样的：

<?php echo $form->labelEx($model,'username'); ?>
<?php echo $form->textField($model,'username'); ?>
<?php echo $form->error($model,'username'); ?>

在这种情况下，您只需将$form->error($model,'username'); 移动到表单中的任何位置。

如何在不使用Javascript API 的情况下使用 Yii2 获得相同的结果？

• 在表单顶部显示单个输入的 Ajax 验证错误。
• 使用errorSummary() 显示 Ajax 验证错误

编辑

我忘了提到我正在通过扩展 yii2-bootstrap4 使用 Bootstrap4。我在显示错误时遇到的部分问题可能与this bug 有关。

考虑到@serghei-leonenco 的回答，我在这里添加了一些完整的最小代码来复制问题。

型号

namespace frontend\models;
use Yii;
use yii\base\Model;
class AjaxForm extends \yii\base\Model
{
    public $demo;
    public function rules()
    {
        return [
            // define validation rules here
            [['demo'], 'required'],
            [['demo'], 'string', 'length' => [2, 4]],

        ];
    }
}

查看

<div class="row">
    <div class="col-lg-6">
        <?php $form = ActiveForm::begin(['id' => 'test-form',
            'options' => [
                'class' => 'form-horizontal'],
                'enableAjaxValidation' => true,
                'enableClientValidation' => false,]) ?>

        <div class="form-row"> 
            <div class="form-group col-md-3">
                <?php echo $form->field($model, 'demo', ['template' => '{error}']); ?>
            </div>
        </div>

        <div class="form-row"> 
            <div class="form-group col-md-3">
                <?= $form->field($model, 'demo')->textInput()->label("Demo") ?>
                <?php echo $form->field($model, 'demo', ['template' => '{error}']); ?>
            </div>
        </div>

        <div class="form-group">
            <div class="col-lg-offset-1 col-lg-11">
                <?= Html::submitButton('Submit 1', ['class' => 'btn btn-primary','name' => 'submit1']) ?>
            </div>
        </div>

        <?php ActiveForm::end() ?>
    </div>
</div>

控制器

public function actionTestajax()
{
    $model = new AjaxForm();

    // Ajax validation
    if (Yii::$app->request->isAjax){
        $model->load(Yii::$app->request->post());
        Yii::$app->response->format = Response::FORMAT_JSON;
        $ret = ActiveForm::validate($model);
        Yii::info("Ajax validation: " . json_encode($ret));
        return $ret;
    }    

    // form submit
    if ($model->load(Yii::$app->request->post())) {

        if($model->validate()){
            // valid data received in $model
            //var_dump($model);
            return $this->render('testajax_submit', ['model' => $model]);
        } else {
            return $this->render('testajax', ['model' => $model]);
        }
    }
    return $this->render('testajax', ['model' => $model]);
}

三个<div class="invalid-feedback">Demo cannot be blank.</div>中，只显示了一个，其他两个保持.invalid-feedback {display: none;}的风格。

$form->errorSummary($model):

执行验证后，返回：

<div style="display:none">
    <p>Please fix the following errors:</p>
    <ul></ul>
</div>

表单提交后，返回：

<div class="alert alert-danger" style="">
    <p>Please fix the following errors:</p>
    <ul>
        <li>Demo cannot be blank.</li>
        <li>Demo cannot be blank.</li>
        <li>Demo cannot be blank.</li>
    </ul>
</div>

Answer 1

我确实测试了$form->errorSummary();，它确实显示了所需的输出，但形式为：

请修正以下错误：

请输入用户名。

像一个选项，你可以这样做：

<?php $form = ActiveForm::begin([
      'id' => 'test-form',
      'options' => ['class' => 'form-horizontal'],
      'enableAjaxValidation' => true,
      'enableClientValidation' => true,
]); ?>
<div class="form-group col-md-3">
      <div class="error-block text-center">
          <?php
              $error = $form->field($model, 'username');
              $error->template = '{error}';
              echo $error;
          ?>
      </div>
      <?php
          $username = $form->field($model, 'username');
          $username->template = "{input}";
          echo $username->textInput(['autofocus' => true]);
      ?>
</div>
<?php ActiveForm::end() ?>

表单字段正上方的输出将是响应：

请输入用户名