Форум программистов, компьютерный форум, киберфорум
Наши страницы
PHP: Yii, Yii2
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.67/3: Рейтинг темы: голосов - 3, средняя оценка - 4.67
Шлфк
19 / 13 / 7
Регистрация: 05.12.2016
Сообщений: 47
1

Yii2. Своя JS-валидация на стороне клиента

30.08.2018, 12:03. Просмотров 600. Ответов 8

Доброго времени суток всем. Толи я гуглить разучился, то ли туплю совсем. Никак не соображу, как сделать свою JS-валидацию на стороне клиента для Yii2. И найти ничего не могу, везде про свою валидацию на стороне сервера.

Суть в следующем. Есть поля для ввода ИНН и СНИЛС. Их нужно проверять на валидность (длинна, контрольная сумма и т.п.).
Валидатор на стороне сервера работает. Но хочется, что бы валидация происходила при уходе фокуса с поля, в процессе заполнения формы (а она большая).

JS-файлик с функциями проверки есть, в AppAsset прописан. В нем есть функции
Javascript
1
validateSnils(snils, error){...}
и
Javascript
1
validateInn(inn, error){...}
принимают, соответсвенно, значения СНИЛС и ИНН, возвращают bool и в error текст ошибки.

Сижу и сообразить никак не могу, куда что писать?! :'(

Модель, для примера:
PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<?php
 
namespace app\models;
 
use Yii;
use app\components\myclasses\DataValidation;
 
/**
 * This is the model class for table "test_model".
 *
 * @property int $id
 * @property string $inn
 * @property string $snils
 */
class TestModel extends \yii\db\ActiveRecord
{
    /**
     * {@inheritdoc}
     */
    public static function tableName()
    {
        return 'test_model';
    }
 
    /**
     * {@inheritdoc}
     */
    public function rules()
    {
        return [
            [['id', 'inn', 'snils'], 'required'],
            [['id'], 'integer'],
            [['inn'], 'string', 'max' => 15],
            [['snils'], 'string', 'max' => 14],
            [['id'], 'unique'],
            ['snils', function($attribute, $params) {
                                $msg = '';
                                $validate = DataValidation::validateSnils($this->$attribute, $msg);
                                if (!$validate)
                                    $this->addError($attribute, $msg);
                                return $validate;
                            },
                'skipOnEmpty' => false, 'skipOnError' => false,
            ],
            ['inn',function($attribute, $params) {
                                $msg = '';
                                $validate = DataValidation::validateInn($this->$attribute, $msg);
                                if (!$validate)
                                    $this->addError($attribute, $msg);
                                return $validate;
                            },
                'skipOnEmpty' => false, 'skipOnError' => false,
            ],
            ['snils', 'match', 'pattern' => '/^[0-9]{3}\-[0-9]{3}\-[0-9]{3}\s[0-9]{2}$/', 'message' => ' Номер СНИЛС введен не верно' ],
            ['inn', 'match', 'pattern' => '/^[0-9]{3}\s[0-9]{3}\s[0-9]{3}\s[0-9]{3}$/', 'message' => ' ИНН введен не верно' ],
        ];
    }
 
    /**
     * {@inheritdoc}
     */
    public function attributeLabels()
    {
        return [
            'id' => 'ID',
            'inn' => 'Inn',
            'snils' => 'Snils',
        ];
    }
 
    /**
     * {@inheritdoc}
     * @return TestModelQuery the active query used by this AR class.
     */
    public static function find()
    {
        return new TestModelQuery(get_called_class());
    }
}
Форма:
PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<?php
 
use yii\helpers\Html;
use yii\widgets\ActiveForm;
use yii\widgets\MaskedInput;
 
/* @var $this yii\web\View */
/* @var $model app\models\TestModel */
/* @var $form yii\widgets\ActiveForm */
?>
 
<div class="test-model-form">
 
    <?php $form = ActiveForm::begin(); ?>
 
    <?= $form->field($model, 'id')->TextInput()?>
 
    <?= $form->field($model, 'snils')->widget(MaskedInput::className(),['mask'=>'999-999-999 99'])->textInput(['placeholder'=>'012-345-678 90']) ?>
 
    <?= $form->field($model, 'inn')->widget(MaskedInput::className(),['mask'=>'999 999 999 999'])->textInput(['placeholder'=>'012 345 678 901']) ?>
 
    <div class="form-group">
        <?= Html::submitButton('Save', ['class' => 'btn btn-success']) ?>
    </div>
 
    <?php ActiveForm::end(); ?>
 
</div>
0
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
30.08.2018, 12:03
Ответы с готовыми решениями:

Валидация массива Yii2
Здравствуйте. В моделе есть переменная, которая всегда является массивом. Так вот, нужно указать...

Yii2 валидация для зарегистрированых и гостей
Как покрасивше сделать? Сейчас сделал так: public function rules() { if(...

Ошибка при установке Yii2-user with Yii2 advanced template
https://github.com/dektrium/yii2-user/blob/master/docs/usage-with-advanced-template.md ...

Простой многостраничный сайт на Yii2 без БД, есть ли быстрый старт для новичка в Yii2?
Привет! Решил смастерить сайт на Yii2, прочел вчера вводный раздел документации - основа...

Валидация на стороне клиента
Ребята, здравствуйте! Произвожу валидцию на стороне клиента. Нашел в интернете код:...

8
tarasalk
1290 / 783 / 308
Регистрация: 13.06.2013
Сообщений: 2,760
30.08.2018, 13:05 2
Представьте что у вас нет Yii и пишите просто на js.
0
Шлфк
19 / 13 / 7
Регистрация: 05.12.2016
Сообщений: 47
30.08.2018, 13:07  [ТС] 3
В смысле, Yii таких "закидонов" реализовывать не позволяет?
0
FloppyDisc
Особый статус
604 / 206 / 160
Регистрация: 18.11.2015
Сообщений: 1,046
30.08.2018, 20:20 4
почитайте
https://yii2-cookbook.readthedocs.io/forms-activeform-js/
https://yiiframework.ru/forum/viewtopic.php?t=41318
https://stackoverflow.com/questions/...dation-in-yii2

в принципе да, можно просто отдельно валидировать поля на js без привязки событий yii
0
tarasalk
1290 / 783 / 308
Регистрация: 13.06.2013
Сообщений: 2,760
30.08.2018, 20:26 5
Скорее это вообще не его зона ответственности. Всякие там ActiveForm это ерунда полная, для простых случаев. Для хорошего фронтенда обычно берут js фреймворк, например vue.js/react или хотя бы jquery.

Ну если хотите свою версию развивать, то принцип следующий. Вешаете на Input событие потери фокуса. В обработчике события получаете input value и вызываете функцию валидации. В случае провала показываете сообщение.
Код можно кинуть рядом с html.
2
Шлфк
19 / 13 / 7
Регистрация: 05.12.2016
Сообщений: 47
31.08.2018, 08:05  [ТС] 6
Принцип понял, спасибо.
А как сообщить ActiveForm об ошибке валидации при этом?
0
cmath
Модератор
2515 / 1739 / 151
Регистрация: 11.08.2012
Сообщений: 3,349
Завершенные тесты: 6
04.09.2018, 02:48 7
Цитата Сообщение от Шлфк Посмотреть сообщение
А как сообщить ActiveForm об ошибке валидации при этом?
Никак. Валидация обычно либо клиентская, либо серверная. Возможно и то и другое одновременно (хотя серверная валидация, имхо, должна присутствовать всегда), но оба варианта будут работать каждый сам по себе. Клиентская нужна для улучшения UX в первую очередь, чтобы страницу перезагружать реже и пользователь мог сразу на месте исправлять ошибки набора. Серверная валидация нужна чтобы в БД не упали не валидные данные, поскольку возможность ошибки на frontend'е никто не отменял, да и просто это не безопасно, поскольку по вашему API могут слать данные в обход клиента (стучать на URL на прямую). ActiveForm же отрабатывает во время обработки POST/GET запроса (в зависимости от назначения, форма для сохранения данных или форма поиска), он данные получит лишь тогда, когда пользователь нажмет на кнопку отправить/найти/сохранить (или что там у вас).
1
Шлфк
19 / 13 / 7
Регистрация: 05.12.2016
Сообщений: 47
13.09.2018, 15:59  [ТС] 8
Я, по всей видимости, не правильно выразился.
На стороне сервера валидация есть. То, что она там должна быть всегда и обязательно - это аксиома

Я имел ввиду, как при своей JS-валидации передать ошибку в "ошибочный" lable и не дать <form> отправить данные на сервер, как это происходит при "штатной" Yii-валидации на клиенте?
0
cmath
Модератор
2515 / 1739 / 151
Регистрация: 11.08.2012
Сообщений: 3,349
Завершенные тесты: 6
14.09.2018, 02:13 9
Цитата Сообщение от Шлфк Посмотреть сообщение
Я имел ввиду, как при своей JS-валидации передать ошибку в "ошибочный" lable и не дать <form> отправить данные на сервер, как это происходит при "штатной" Yii-валидации на клиенте?
Этого можно добиться, если вся форма целиком обрабатывается скриптом, включая её отправку. Т.е. вам нужно перехватывать в скрипте событие submit, вызывать валидаторы - если валидацию не проходит, то не посылать форму на сервер, а вывести список ошибок на страницу. Я встроенными в Yii средствами клиентской валидации в работе не пользуюсь, поэтому мало что могу сказать, как настроить вывод ошибок на страницу (т.е. чтобы label'ы становились красными и прочая) - я обычно сам пишу валидаторы с помощью validate.js, и дом обрабатываю также отдельно, в силу специфики моих задач. Когда управляешь самостоятельно всеми этапами валидации на клиенте - узнать, куда тыкать ошибку и какие классы вешать на какие элементы (для визуальных эффектов) - все это обычно затруднений не вызвает.
1
14.09.2018, 02:13
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
14.09.2018, 02:13

Валидация на стороне клиента
Подскажите, пожалуйста, как правильно оформить валидацию на стороне клиента. У меня есть суммарная...

Валидация checkBox на стороне клиента
Ребят хелп. Мне нужно чтобы на страничке был чекбокс, который обязателен к заполнению (отмечен) ...

Валидация данных на стороне клиента посредством JS
Насколько корректно производить валидацию на стороне клиента? С точки зрения безопасности в т.ч.? ...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
9
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2019, vBulletin Solutions, Inc.
Рейтинг@Mail.ru