【问题标题】:How to customize validation error message to display on tooltip in Yii2?如何自定义验证错误消息以显示在 Yii2 的工具提示上?
【发布时间】:2019-05-29 08:35:06
【问题描述】:

我正在使用 yii2 的 ActiveForm,我想自定义验证错误。我想在工具提示上显示错误。

这是我的表格

<?= $form = ActiveForm::begin(['id' => 'login-form','method'=>'post']); ?>
    <?= 
        $form->field($model, 'email')
            ->textInput([
                'class'=>'form-control login_email',
                'placeholder'=>'Email'
                /*'onfocus'=>"this.value = '';",
                "onblur"=>"if (this.value == '') {
                    this.value = 'Email';
                }"*/
            ])
            ->label(false);
    ?>
    <?= 
        $form->field($model, 'password')
            ->passwordInput([
                'class'=>'form-control',
                'placeholder'=>'Password'
            ])
            ->label(false);
    ?>
    <input type="text" name="hidden" value="login" hidden="true">
    <p class="forgot">
        <a href="<?= Yii::$app->urlManager->createUrl(['site/request-password-reset']); ?>">
            Forgot Password?
        </a>
    </p>

    <div class="form-group">
        <?= Html::submitButton('Log In', ['class' => 'sign-in','name' => 'login-button']) ?>
    </div>
<?php ActiveForm::end(); ?>

如果有人对此有任何想法,请告诉我。

【问题讨论】:

  • 我已经回答了之前提出的另一个问题,错误需要在anchortitle 属性内显示,它解决了您所问的问题,因为工具提示也适用于标题,如果对您有帮助,请参阅here

标签: php yii2 tooltip custom-errors yii2-validation


【解决方案1】:

更新表单模板中的错误消息,如下所示

  $form = ActiveForm::begin([
  'id' => 'login-form',
  'options' => ['enctype' => 'multipart/form-data'],
   'fieldConfig' => ['template' => "<div class=\"input-cover\"><div class=\"tooltip\">{error}</div>\n{label}\n{input}</div>",
  'inputOptions' => ['class' => 'input-control'],
                    ],
          ]);

【讨论】:

  • 不,它不起作用。你有关于 class input-cover 和 tooltip 的 css 吗?
  • .tooltip .help-block { 位置:绝对;颜色:#fff;填充:6px 8px;宽度:150px;顶部:0px;右:-180px;背景:rgba(213,16,24,0.9);边框:1px 实心#d51018;边框半径:6px; z指数:999; }
  • .input-cover { 浮动:左;宽度:100%;位置:相对;边距底部:20px; }
猜你喜欢
  • 1970-01-01
  • 2018-06-15
  • 1970-01-01
  • 1970-01-01
  • 2016-07-23
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-02-08
相关资源
最近更新 更多