JQuery Validation Plugin для валидации динамических input' ов

@evtyshenkosemen · Регистрация: 16.12.2013

Студворк — интернет-сервис помощи студентам

Приветствую Вас, профессионалы JavaScript!
Я мало программировал на JS(Ну точнее начинаю)...
Ммм, чему такое долгое вступление? О чем нужно спросите) Итак, к сути:]

На странице есть два блока с id="well_[номер]".
Каждое из них состоит из трех input полей (cost, name, description).
Схематично это выглядит так:
[well_1]

(cost_1)

(name_1)

(description_1)

[/well_1]
[well_2]

(cost_2)

(name_2)

(description_2)

[/well_2]
Эти блоки (их может быть более 2-х) загружаются из базы. Генерируется HTML и JS код интерпретатором PHP.
HTML - сами блоки
JS - код валидации для сгенерированных блоков(Ниже пример кода)

JavaScript
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
    $("#bonuses").validate({
        rules: {
            cost_1: {
                required: true,
                digits: true,
                minlength: 1,
                maxlength: 10
            },
            name_1: {
                required: true,
                only_allowed_characters: true,
                minlength: 3,
                maxlength: 20
            },
            description_1: {
                required: true,
                only_allowed_characters: true,
                minlength: 20,
                maxlength: 200
            },
            cost_2: {
                required: true,
                digits: true,
                minlength: 1,
                maxlength: 10
            },
            name_2: {
                required: true,
                only_allowed_characters: true,
                minlength: 3,
                maxlength: 20
            },
            description_2: {
                required: true,
                only_allowed_characters: true,
                minlength: 20,
                maxlength: 200
            },
        },
    })
});

Все замечательно работает, формы проверяются. В плагин jQuery Validation ~~путем проб и ошибок~~ добавлен код, который активирует всплывающие сообщения плагина tipsy.

Проблема в том, что новые блоки well_№, которые добавляются в страницу на лету, не представляется возможности проверять так же, как и добавленные не на лету=[ Ибо (видимо) нельзя повторно добавить правила для той же таблицы и новых полей...

Пробовал добавлять следующим кодом:

JavaScript
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
eval'
$().ready(function() {
    $("#bonuses").validate({
        rules: {
            cost_'+count+': {
                required: true,
                digits: true,
                minlength: 1,
                maxlength: 10
            }, 
            name_'+count+': { 
                required: true, 
                only_allowed_characters: 
                true, minlength: 3, 
                maxlength: 20 
            }, 
            description_'+count+': {
                required: true, 
                only_allowed_characters: true, 
                minlength: 20, 
                maxlength: 200 
            }, 
        }, 
    }) 
});
';

Через eval(); Возможно криво и говнокодно, но с моими PHP' шными мозгами это был единственный выход... Код не давал ни ошибок ни результата...

Прошу помощи у гуру JavaScript и jQuery.
Используется плагин jQuery Validation
Код прилагаю в архиве. Очень надеюсь на вашу помощь.
Спасибо!

@Fedor Vlasenko · 16.08.2015, 20:58

зачем eval? оберни код в самовызывающуюся функцию и вызывай после динамического обновления

JavaScript
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
(function validate(){
    $("#bonuses").validate({
        rules: {
            cost_'+count+': {
                required: true,
                digits: true,
                minlength: 1,
                maxlength: 10
            }, 
            name_'+count+': { 
                required: true, 
                only_allowed_characters: 
                true, minlength: 3, 
                maxlength: 20 
            }, 
            description_'+count+': {
                required: true, 
                only_allowed_characters: true, 
                minlength: 20, 
                maxlength: 200 
            }
        } 
    });
}());
// после обновления 
 validate();

@evtyshenkosemen · 17.08.2015, 04:11 **[ТС]**

Poznakomlus, а как же

Сообщение от Poznakomlus

'+count+'

? Это же из eval. Код в итоге нерабочий. Я понимаю реакцию программистов на eval, но тут проблема не в нем.
Даже этот код не работает:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
rules = {};
rules['cost_'+count] = {
    required: true,
    digits: true,
    minlength: 1,
    maxlength: 10
};
rules['name_'+count] = {
    required: true,
    only_allowed_characters:
    true, minlength: 3,
    maxlength: 20
}
rules['description_'+count] = {
    required: true,
    only_allowed_characters: true,
    minlength: 20,
    maxlength: 200
};
$('#bonuses').validate({'rules': rules });

Тут нужно знать ООП. И посмотреть что творится в плагине jquery.validate.js

Новые блоги и статьи Все статьи Все блоги /
Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .	SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .	SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .
Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .	SDL3 для Web (WebAssembly): Сборка библиотек: SDL3, Box2D, FreeType, SDL3_ttf, SDL3_mixer и SDL3_image из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .	SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .