Как на стороне клиента применить собственные стили после валидации формы?

Вопросы по вёрстке и JavaScript
Ответить
Аватара пользователя
girmate
Сообщения: 1534
Зарегистрирован: 2015.10.27, 12:52

Как на стороне клиента применить собственные стили после валидации формы?

Сообщение girmate »

Если валидация успешная (или нет) фреймворк по умолчанию обводит рамочкой текстовое поле (красной или зеленой в зависимости от успеха валидации).

1. Не совсем понял где именно он это реализует (в activeFrom.js)?
2. Мне нужно убрать определенный класс с input и добавить определенный класс в div, который окружает этот input в зависимости от того, успешная валидация или нет. Как это сделать?

вот код одного из полей:

Код: Выделить всё

<?php
      echo $form->field($model, 'username', [
       'options' => ['class' => 'g-mb-30''],
        'errorOptions' => ['class' => 'form-control-feedback']
                    ])->begin();
      echo Html::activeTextInput($model, 'username', [
         'class' => 'form-control g-color-black g-bg-white g-bg-white--focus g-brd-gray-light-v4 g-brd-primary--hover rounded g-py-15 g-px-15',
         'placeholder' => 'ваше имя',
                    ]);
   echo Html::error($model, 'username', ['tag' => 'small', 'class' => 'form-control-feedback']);
   echo $form->field($model, 'fieldname')->end();
?>

В зависимости от валидации мне нужно убрать класс g-bg-white в input-е и добавить u-has-error-v1 в div.

Сейчас код выше генерирует это поле:

Код: Выделить всё

<div class="g-mb-30 field-loginform-username required">
    <input type="text" id="loginform-username"
           class="form-control g-color-black g-bg-white g-bg-white--focus g-brd-gray-light-v4 g-brd-primary--hover rounded g-py-15 g-px-15"
           name="LoginForm[username]"
           placeholder="ваше имя">
    <small class="form-control-feedback"></small>
</div>
Помогите советом.
Осторожно! Вы общаетесь с новичком ;)
Аватара пользователя
girmate
Сообщения: 1534
Зарегистрирован: 2015.10.27, 12:52

Re: Как на стороне клиента применить собственные стили после валидации формы?

Сообщение girmate »

Форму победил. Оказывается еще есть опции для формы - можно указать какие классы применять при успешной или неуспешной валидации:

Код: Выделить всё

<!-- Form -->
                    <?php $form = ActiveForm::begin([
                        'id' => 'login-form',
                        'options' => ['class' => 'g-py-15'],
                        'errorCssClass' => 'u-has-error-v1',
                        'successCssClass' => 'u-has-success-v1-1',

                    ]) ?>
А класс .g-bg-white можно просто выкинуть из поля. Он всего лишь добавляет белый цвет фона поля формы. А фон и так белый.

Всем спасибо.
Осторожно! Вы общаетесь с новичком ;)
Аватара пользователя
Introvert
Сообщения: 139
Зарегистрирован: 2017.07.04, 13:42
Откуда: Украина, Киев

Re: Как на стороне клиента применить собственные стили после валидации формы?

Сообщение Introvert »

И тебе спасибо! Только думал об этом, потому что из за этой валидации съезжает дизайн и нужно придумать так чтобы он не ломался.
Пишу социальную сеть заявок для фирм.
Аватара пользователя
Introvert
Сообщения: 139
Зарегистрирован: 2017.07.04, 13:42
Откуда: Украина, Киев

Re: Как на стороне клиента применить собственные стили после валидации формы?

Сообщение Introvert »

Кто знает как сместить позицию текста при валидации?
Пишу социальную сеть заявок для фирм.
Ответить