vorst.ru - Статьи о задачах возникающих при создании сайта и их решении
Статьи из рубрики form

Как написать валидатор

Пример валидатора для серверной и клиентской частей

Есть таблица цен на номера в пансионате. Цена зависит от различных параметров - номера, типа ценника, типа питания, варианта размещения, наличия или отсутствия лечения. Цена, для определенной комбинации значений этих параметров, может быть только одна.

Нужно записать правило проверки как для обычной формы так и для ее модального варианта.


Сортировка

Сортировка строк мышкой

Василий оставил комментарий в конце января

Напишите, пожалуйста, статью, как массово загружать изображения через ajax с возможностью сортировки перетаскиванием.

Речь о расширении yii2-byone-uploader, которое может загружать, сжимать, обрезать картинки для любой модели. Я писал о нем уже пару раз.

На тот момент этой функциональности не было. Собирался я долго. Но вот, наконец добавил требуемое. Теперь спешу написать несколько слов о процессе. Демо (при редактировании).


Что к файлу

как добавить атрибут к загруженному файлу

Иногда важно определить дополнительную информацию для загружаемого файла. Например это может быть описание. В расширении yii2-byone-uploader возможность добавить описание к файлу уже предусмотрена.

Кроме описания может быть добавлено и любое другое свойство. В предыдущем примере использовалось свойство when типа radio с двумя значениями - "до" и "после". Как добавить новое свойство?


До и После

галерея фотографий, загруженных до и после момента времени

Представьте, что вы продаете курс похудания. Вам нужно наглядно представить результат вашего курса. Фото "До" и "После", что может быть лучшей иллюстрацией?

Как и в предыдущем примере примем, что участников ограниченное количество. Например 4. Забудем про похудающих - слишком скучно. Будем "работать" с кинозвездами. Для каждого можно загрузить только 4 фотографии. Таким образом всего 16 фото. Если загружены все 16 и кому-то захочется добавить "свои" фото, то придется что-то удалить. Демо.


Загрузка фото

делаем демо

Чтобы показать, как работает загрузка изображений, нужно разрешить загружать изображения на свой сайт. Но, в этом случае, дисковое пространство может быть быстро исчерпано и нужно как-то удалять оставленный посетителями "мусор".

Например, можно устроить, что-то вроде надписи в столовой - "Уберите, пожалуйста, за собой посуду" (демо).


Pop-up форма

редактирование и валидация модальной формы

Бывает, что количество полей в таблице не слишком велико и редактировать в модальном окне проще и нагляднее. Что необходимо, чтобы организовать стандартный набор операций - CReate, Update, Delete?



Поиск



Как написать валидатор

Пример валидатора для серверной и клиентской частей

  • 1. Pop-up форма
  • 2. Как написать валидатор

Есть таблица цен на номера в пансионате. Цена зависит от различных параметров - номера, типа ценника, типа питания, варианта размещения, наличия или отсутствия лечения. Цена, для определенной комбинации значений этих параметров, может быть только одна.

Нужно записать правило проверки как для обычной формы так и для ее модального варианта.


    Поделиться

Для обычной формы задать проверку может показаться не сложным common/models/Price.php.

[['type', 'fund_id', 'accommodation', 'food', 'treatment'], 'unique', 
  'targetAttribute' => [
    'type', 'fund_id', 'accommodation', 'food', 'treatment'], 
  'message' => \Yii::t('app', 'Duplicate entry'),
],

Такой вариант будет работать при добавлении новой строки. Но если понадобится поменять цену, в уже определенной строке, получим ошибку так как такая строка действительно уже существует common/components/UniqueValidator.php.

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

Пример собственного валидатора

Берем значения атрибутов до заполнения формы, сравниваем с данными формы, если ничего не изменилось, то считаем, что строка осталась уникальной.

Если же изменился один или несколько ключевых атрибутов, то ищем новую комбинацию в таблице и добавляем ошибку, если такая комбинация существует.

namespace common\components;
use yii\helpers\Url;
use yii\validators\Validator;
use common\models\Price;
/**
 * Check uniqueness by multiple values. 
 * If the values have not changed, we believe that the uniqueness is preserved. 
 * If one or more values have changed, we looking for a combination in the table. 
 * Error if exists.
 */
class UniqueValidator extends Validator
{
    public function init()
    {
        parent::init();
        $this->message = \Yii::t('app', 'Duplicate entry.');
    }
    public function validateAttribute($model, $attribute)
    {
        $old = $model->getOldAttributes();
        // Let's check if any key attributes have been changed.
        if($old && (
            $old['type'] != $model->type || 
            $old['fund_id'] != $model->fund_id || 
            $old['accommodation'] != $model->accommodation || 
            $old['food'] != $model->food || 
            $old['treatment'] != $model->treatment
        )) {
            // Is there any entity with a new values?
            if(Price::find()->where([
                'type' => $model->type, 
                'fund_id' => $model->fund_id, 
                'accommodation' => $model->accommodation, 
                'food' => $model->food, 
                'treatment' => $model->treatment,
            ])->exists()) {
                // An error pushed if entity exists.
                $model->addError($attribute, $this->message);
            }
        }
    }
    public function clientValidateAttribute($model, $attribute, $view)
    {
        $url = json_encode(Url::to(['price/entity-exists']));
        $old = json_encode($model->getOldAttributes());
        $message = json_encode($this->message, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE);
        return <<<JS
var entity = {};
entity.url = $url;
entity.old = $old;
// Get new values from a form
entity.new = {
    type: $('#price-type').val(),
    fund_id: $('#price-fund_id').val(),
    accommodation: $('#price-accommodation').val(),
    food: $('#price-food').val(),
    treatment: $('#price-treatment').val()
};
// Let's check if any key attributes have been changed.
if(
    entity.new.type != entity.old.type ||
    entity.new.fund_id != entity.old.fund_id ||
    entity.new.accommodation != entity.old.accommodation ||
    entity.new.food != entity.old.food ||
    entity.new.treatment != entity.old.treatment
) {
    // Is there any entity with a new values?
    entity.exists = false;
    $.ajax({
        url: entity.url, 
        data: entity.new,
        dataType: "json",
        // Very important parameter. Without it entity.exists will be false in any case.
        async:false
    }).done(function(response) {
        entity.exists = response;
    });
    // An error pushed if entity exists.
    if(entity.exists)
        messages.push($message);
}
JS;
    }
}

Проверка на стороне клиента

Проверки на сервере и на стороне клиента имеют один алгоритм, но есть важное отличие в проверке наличия дубля. Проверка происходит с помощью ajax-запроса и чертовски важно указать, что этот запрос не является асинхронным.

Ajax-запрос по умолчанию всегда асинхронный и, если не указать обратное, запрос будет отправлен и, не дожидаясь ответа, программа продолжит выполнение. Когда ответ готов часть done уже выполнена и entity.exists всегда получает false.

А почему сразу не использовать объект message в блоке done? Кажется это проще. Но в области видимости блока done нет объекта messages .

Controller

backend/controllers/PriceController.php

  public function actionEntityExists($type, $fund_id, $accommodation, $food, $treatment)
  {
    \Yii::$app->response->format = \yii\web\Response::FORMAT_JSON;
    return Price::find()->where([
      'type' => $type, 
      'fund_id' => $fund_id, 
      'accommodation' => $accommodation, 
      'food' => $food, 
      'treatment' => $treatment,
    ])->exists();
  }

Model

common/models/Price.php

  [['type', 'fund_id', 'accommodation', 'food', 'treatment'], 
    'common\components\UniqueValidator'],

Заключение

Написать собственный валидатор проще, чем кажется, но нужно быть тщательне́е при написании кода для проверки на стороне клиента. Чтобы не тратить время на поиск ошибки, нужно помнить две вещи о JavaScript - область видимости и асинхронный характер выполнения.

Оставить комментарий

Только авторизованные пользователи могут оставлять комментарии. Пожалуйста авторизуйтесь или пройдите регистрацию.