0

I am using ActiveForm of yii2 and I want to customize the validation errors. I want to display errors on tooltip.

This is my form 

<?= $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(); ?>

Please tell me if anyone has idea about this.

Lakhwinder Singh
  • 5,536
  • 5
  • 27
  • 52
php guy
  • 113
  • 13
  • I have answered another question asked previously where the error needed to be displayed inside the `title` attribute of the `anchor` and it addresses the same thing you are asking as the tooltip works with the title too, see [here](https://stackoverflow.com/questions/53607230/how-to-place-yii2-form-error-in-title-of-anchor-tag/53621680#53621680) if it helps you out – Muhammad Omer Aslam May 29 '19 at 11:31

1 Answers1

0

Update error message in form template like below

  $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'],
                    ],
          ]);
jithin
  • 920
  • 9
  • 17
  • No it's not working. Are you having any css on class input-cover and tooltip? – php guy May 30 '19 at 11:40
  • .tooltip .help-block { position: absolute; color: #fff; padding: 6px 8px; width: 150px; top: 0px; right: -180px; background: rgba(213,16,24,0.9); border: 1px solid #d51018; border-radius: 6px; z-index: 999; } – jithin Jun 03 '19 at 09:36
  • .input-cover { float: left; width: 100%; position: relative; margin-bottom: 20px; } – jithin Jun 03 '19 at 09:36