Как сделать popup с формой логина на Yii2?

Question

[Greg Popov]

Привет. По вот этому примеру сделал всплывающие окно, которое подгружает форму авторизации.

Проблема в том, что по окончанию загрузки автоматически срабатывает submit, и если atocomplete подставил ваши сохраненные в браузере данные, они валидные, автоматически происходит логин, если нет, автоматически вываливается ошибка что введенные данные невалидные. Не могу убрать этот баг ни как.

Окно:

<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>

Контроллер:

/**
     * 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 с формой логина:

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

Заранее спасибо за помощь.

Comments

[Максим Тимофеев]

В Вашем коде нет ни одного javascript, а срабатывание summit явно там. Как же Вам помочь если не видеть код. YII к срабатыванию submit не имеет никакого отношения. Вероятно отношение имеет автокомплит, но его кода Вы как раз не привели

[Greg Popov]

Максим Тимофеев: автокомплит выполняется google chrome. Это просто ваши часто используемые сохраненные данные

[Максим Тимофеев]

Greg Popov: Тогда в чем баг? Вы очень путано описали. Разделите что должно быть и что происходит.

[Greg Popov]

Максим Тимофеев: проблема в том, что если браузер заполняет ваши запомненные ранее данные в форму, то форма автоматически выполняет сабмит, и отрабатывает валидация, чего без действия пользователя быть не должно.

Answer 1

[Максим Тимофеев]

Настройте ActiveForm так, что бы валидация шла только после действий пользователя. Вариантом масса. Вот параметры,которые помогут в этом:

$validateOnBlur
$validateOnChange
$validateOnSubmit
$validateOnType
$validationDelay

подробно тут:
www.yiiframework.com/doc-2.0/yii-widgets-activefor...

Не знаю как Вам будет удобнее, это может быть кнопка или потеря фокуса поля, но точно validateOnChangeпоставьте false

Comments

[Greg Popov]

Спасибо большое, буду смотреть в эту сторону.