Yii2 ActiveForm: отображать Ajax ответ проверки в верхней части формы или в errorSummary () - PullRequest
Новая
       14

Yii2 ActiveForm: отображать Ajax ответ проверки в верхней части формы или в errorSummary ()

0 голосов
/ 09 марта 2020

Я использую ActiveForm, и мне нужно было бы отображать ошибки проверки не близко к полям ввода, а в верхней части формы.

Как показано в примере кода ниже, установка errorOptions Я не отображаю сообщение об ошибке в позиции по умолчанию.

Ajax проверка работает, но $form->errorSummary($model) не показывает никакого сообщения, даже если здесь , похоже, что должно и в документации я не смог найти четкого ответа.

Кроме того, добавление 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'); в любое место формы.

Как можно получить те же результаты с Yii2 без использования Javascript API ?

  • Отображение Ajax ошибок проверки для отдельного ввода в верхней части формы.
  • Отображение Ajax ошибок проверки с помощью errorSummary()

Edit

Я забыл упомянуть, что использую Bootstrap4 через расширение yii2-bootstrap4 . Часть проблем, которые у меня возникают с отображением ошибок, может быть связана с этой ошибкой .

Учитывая ответ от @ 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>

1 Ответ

0 голосов
/ 09 марта 2020

Я проверил $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() ?>

Вывод будет прямо над полем формы, будет ответ с:

Пожалуйста, введите имя пользователя

...