How to make popup with login form in Yii2?

Question

JavaScript

Hello. According to this example, I made a pop-up window that loads the authorization form.

The problem is that at the end of the download, submit automatically fires, and if atocomplete substituted your data saved in the browser, they are valid, login automatically occurs, if not, an error automatically occurs that the entered data is invalid. I can't get rid of this bug.

Window:

<div class="reveal main-layout-reveal popup" data-animation-in="slide-in-down"
                     data-animation-out="slide-out-up" id="main-layout-reveal" data-reveal>
                    <div class="reveal-content-container"></div>
                    <button class="close-button" aria-label="Dismiss alert" type="button" data-close>
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

Controller:

/**
     * Login action.
     *
     * @return string
     */
    public function actionLogin()
    {
        $model = new LoginForm();

        if (Yii::$app->request->isAjax && $model->load(Yii::$app->request->post())){
            if ($model->login()) {
                return $this->goBack();
            } else{
                Yii::$app->response->format = Response::FORMAT_JSON;
                return ActiveForm::validate($model);
            }
        }
        return $this->renderAjax('login', [
          'model' => $model
        ]);
    }

js

$(document).on('click', '#login ', function(e) {
    var modal, url;
    url = $(this).data('url');
    modal = $('#main-layout-reveal');
    modal.children('.reveal-content-container').load(url);
    modal.foundation('open');
    $.post(url).done(function(resp) {
      modal.children('.reveal-content-container').html(resp);
      modal.foundation('open');
    });
  });

Partial with login form:

<?php $form = ActiveForm::begin([
            'id' => 'login-form',
            'enableAjaxValidation' => true,
            'options' => [
                'class' => 'form-horizontal'
            ],
            'fieldConfig' => [
                'template' => "{label}\n{input}\n{error}",
                'labelOptions' => [
                    'class' => 'form-label'
                ],
            ],
        ]); ?>

            <div class="row">
                <div class="medium-24 columns">
                    <h3 class="outer-offset-bottom text-center">Welcome back!</h3>
                </div>
            </div>

            <div class="row">
                <hr>
            </div>

            <div class="row">
                <?= $form->field($model, 'username', [
                    'options' => [
                        'class' => 'large-24 column',
                    ],
                ])->textInput(['autocomplete' => 'off']) ?>
            </div>

            <div class="row">
                <?= $form->field($model, 'password', [
                    'options' => [
                        'class' => 'large-24 column relative',
                    ],
                    'template' => '{label}<div class="relative">{input}</div>{error}',

                ])->passwordInput(['autocomplete' => 'off']) ?>
            </div>

            <div class="row">
                <div class="small-24 column">
                    <?= $form->field($model, 'rememberMe', [
                        'options' => [
                            'class' => 'no-error-display',
                        ],
                        'template' => '<div class=\'pull-left\'>{input}&nbsp;</div>
                                       <div class=\'pull-left\'>{label}</div>
                                       <small class="medium-min-size pull-right" style="margin-top: 2px">'.
                                        Html::a('Forgot your password?', Url::to('/authenticate/password-restore')).
                                       '</small>',
                    ])->label($model->getAttributeLabel('rememberMe'),['class'=>''])->checkbox([], false); ?>
                </div>
            </div>

            <div class="row">
                <div class="medium-12 small-16 columns">
                    <?= SocialLogin::widget(['action' => 'authenticate/social-login']); ?>
                </div>
                <div class="medium-12 small-8 columns">
                    <?= Html::button('Login', ['class' => 'button hollow success pull-right', 'name' => 'login-button']) ?>
                </div>
            </div>

        <?php ActiveForm::end(); ?>

Thank you in advance.

Answer 1

Set up ActiveForm so that validation occurs only after user actions. Weight option. Here are the options to help you with this:

$validateOnBlur
$validateOnChange
$validateOnSubmit
$validateOnType
$validationDelay

details here:
www.yiiframework.com/doc-2.0/yii-widgets-activefor...
I don't know how it will be more convenient for you, it can be a button or a field focus loss, but definitely set validateOnChange to false