Проверка полей ввода в Диалоге JQuery

@type_array · Регистрация: 18.07.2013

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

Доброго всем времени дня!

Задался вопросом сделать форму из input='text' в диалоге JQuery с валидацией полей. Вот простой код:

HTML5
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
<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>jQuery UI Dialog - Modal form</title>
        <link href="jQueryUI/css/custom-theme/jquery-ui-1.10.4.custom.css" rel="stylesheet">
        <script src="jQueryUI/js/jquery-1.10.2.js"></script>
        <script src="jQueryUI/js/jquery-ui-1.10.4.custom.js"></script>
        <style>
            body { font-size: 62.5%; }
            label, input { display:block; }
            input.text { margin-bottom:12px; width:95%; padding: .4em; }
            fieldset { padding:0; border:0; margin-top:25px; }
            h1 { font-size: 1.2em; margin: .6em 0; }
            div#users-contain { width: 350px; margin: 20px 0; }
            div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
            div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
            .ui-dialog .ui-state-error { padding: .3em; }
            .validateTips { border: 1px solid transparent; padding: 0.3em; }
        </style>
        <script>
            $(function() {
                var counter = 0;
                
                $( "#dialog-form" ).dialog({
                    autoOpen: false,
                    height: 300,
                    width: 350,
                    modal: true,
                    buttons: {
                        "Create": function() {
                            $( "#dialog-content" ).append( "<input type='text' name='question"+counter+"' id='question"+counter+"' class='text ui-widget-content ui-corner-all'>" );                            
                            counter++;
                        },
                        
                        Ok: function() {
                            if (counter > 0) {
 
                            } else {
 
                            }
                        },
                        
                        Cancel: function() {
                            $( this ).dialog( "close" );
                        }
                    }
                });
                
                $( "#create-field" )
                .button()
                .click(function() {
                    $( "#dialog-form" ).dialog( "open" );
                });
            });
            </script>
</head>
<body>
    <div id="dialog-form" title="Dialog">
        <div id="dialog-message"></div>
        <div id="dialog-content"></div>
    </div>
    <button id="create-field">Dialog</button>
</body>
</html>

Получается -

Помогите, пожалуйста, сделать так чтобы при нажатии на "ОК" проводилась проверка:
1) Есть ли поля для ввода
2) Если есть, то пустые ли они
3) Если нет ошибок, то закрыть диалог, стереть и удалить поля для ввода

По нажатии на кнопку "Cancel" просто стереть и удалить поля для ввода

@Lazy_Den · 22.04.2014, 13:11

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

Помогите, пожалуйста, сделать...

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

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
42
43
44
45
$(function() {
    var counter = 0;
    $( "#dialog-form" ).dialog({
        autoOpen: false,
        height: 300,
        width: 350,
        modal: true,
        buttons: {
            Create: function() {
                $( "#dialog-content" ).append( "<input type='text' name='question"+counter+"' id='question"+counter+"' class='text ui-widget-content ui-corner-all'>" );
                counter++;
            },
            Ok: function() {
                var fields = $('input[id^=question]'),
                    emptyFields = 0,
                    indx = [];
                if(fields.length > 0){
                    // если поля существуют
                    fields.each(function(i, el){
                        if($.trim($(el).val()) === '') emptyFields++;
                    });
                    if(!emptyFields){
                        // если все поля заполнены
                        // очищаем контент
                        $( "#dialog-content" ).html('');
                        // и закрываем окно диалога
                        $( this ).dialog( "close" );
                    }
                } else {
                    // Если текстовых полей нет 
                    // (!) тут что-то делаем
                }
            },
            Cancel: function(){
                // Просто очистить контент диалога
                $('#dialog-content').html('');
            }
        }
    });
    $( "#create-field" )
    .button()
    .click(function() {
        $( "#dialog-form" ).dialog( "open" );
    });
});

@type_array · 22.04.2014, 14:17 **[ТС]**

Lazy_Den, Низкий вам поклон

Добавлено через 49 минут

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

Единственное, что вы не указали - это то, что нужно делать, если по нажатию на "Ok", полей не окажется

Да, конечно! Если не сложно, можно чтобы всё, что я ввёл в полях, появилось в виде таблицы под кнопкой "Dialog"?

@Lazy_Den · 22.04.2014, 14:29

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

чтобы всё, что я ввёл в полях, появилось в виде таблицы под кнопкой "Dialog"

Какой таблице? Я её не наблюдаю

@type_array · 22.04.2014, 14:33 **[ТС]**

Lazy_Den, Можно не таблицей, а простым списком. Главное, чтобы появилось на основной странице под кнопкой, запускающей диалог

@Lazy_Den · 22.04.2014, 14:42

type_array, Смотрите такой вариант, а дальше - ваша фантазия.

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
$(function() {
    var counter = 0,
        output = $('#output_data');
    $( "#dialog-form" ).dialog({
        autoOpen: false,
        height: 300,
        width: 350,
        modal: true,
        buttons: {
            Create: function() {
                $( "#dialog-content" ).append( "<input type='text' name='question"+counter+"' id='question"+counter+"' class='text ui-widget-content ui-corner-all'>" );
                counter++;
            },
            Ok: function() {
                var fields = $('input[id^=question]'),
                    cVal = false,
                    emptyFields = 0,
                    fieldData = [],
                    indx = [];
                if(fields.length > 0){
                    // если поля существуют
                    fields.each(function(i, el){
                        cVal = $.trim($(el).val());
                        if(cVal === '') {
                            emptyFields++;
                            $(el).effect('highlight', {color: '#f00'});
                        } else {
                            fieldData.push(cVal);
                        }
                    });
                    if(!emptyFields){
                        // если все поля заполнены
                        // выводим их данные
                        var tmp = '<tr><th>№ поля</th><th>Значение</th></tr>';
                        for(var i = 0; i < fieldData.length; i++){
                            tmp += '<tr><td>'+ (i+1) +'</td><td>' + fieldData[i] + '</td></tr>';
                        }
                        output.html(tmp);
                        // очищаем контент
                        $( "#dialog-content" ).html('');
                        // и закрываем окно диалога
                        $( this ).dialog( "close" );
                    }
                } else {
                    // Если текстовых полей нет 
                    // (!) тут что-то делаем
                }
            },
            Cancel: function(){
                // Просто очистить контент диалога
                $('#dialog-content').html('');
            }
        }
    });
    $( "#create-field" )
    .button()
    .click(function() {
        $( "#dialog-form" ).dialog( "open" );
    });
});

@type_array · 22.04.2014, 14:50 **[ТС]**

Lazy_Den, Огромное спасибо! Очень помогло!

@Lazy_Den · 22.04.2014, 14:52

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

Очень помогло!

Хм... Обычно, я так говорю пиву после выходных

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11680&d=1772460536 Одним из. . .	Реалии 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 позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .

Проверка полей ввода в Диалоге JQuery

Решение

Решение

@type_array 2 / 2 / 0 Регистрация: 18.07.2013 Сообщений: 23
	22.04.2014, 14:33 [ТС]
	Lazy_Den, Можно не таблицей, а простым списком. Главное, чтобы появилось на основной странице под кнопкой, запускающей диалог 0

@type_array 2 / 2 / 0 Регистрация: 18.07.2013 Сообщений: 23
	22.04.2014, 14:50 [ТС]
	Lazy_Den, Огромное спасибо! Очень помогло! 0