ReCAPTCHA во всплывающем окне

@index58 · Регистрация: 01.07.2016

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

Всем привет.
Только начал изучать JS.

У меня на странице есть форма, работа которой должна происходить следующим образом...

1. Пользователь вводит данные полей формы, нажимает кнопку "Отправить", появляется всплывающее модальное окно, содержащее только гугловскую капчу и кнопку "Подтвердить". Пользователь вводит эту капчу, нажимает кнопку "Подтвердить", и форма отправляется обычным ПОСТ-запросом с перезагрузкой страницы.

2. Если данные полей формы введены некорректно, то при нажатии на кнопку "Отправить", это должно быть проверено браузером (не скриптом), и модальное окно с капчей не должно появляться.

3. Если во всплывающем окне капча не введена, то при нажатии на кнопку "Подтвердить" форма не должна отправляться.

4. Капча должна загружаться (создаваться) не сразу после загрузки страницы, а только после появления всплывающего окна. Потому что на странице много таких всплывающих окон с капчами, и если делать это сразу, то сайт грузится долго.

Вот мой код:

Кликните здесь для просмотра всего текста

PHP/HTML
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
<head>
    <title>Тест 1</title>
    <meta charset="utf-8" />
    <style>
        body {
            font-family: Arial;
        }
        .window {
            position: relative;
            background-color: #AAAAAA;
            color: #000000;
            padding: 20px;
        }
        .close_button {
            position: absolute;
            top: 2px;
            right: 2px;
            padding: 0 2px 0 3px;
            border: 1px solid #000000;
            cursor: pointer;
        }
        .blind {
            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            background-color: rgba(0,0,0,0.6);
            z-index: 20;
            display: flex;
            justify-content: center;
            align-items: center;
            visibility: hidden;
        }
    </style>
</head>
 
 
<body class="window">
    
    <script>
        function create_captcha(id){
            return grecaptcha.render(
                id+'_container',
                {'sitekey' : '6Lf7OjAUAAAAALqk74bX__pCrYgDv6MTN9EfeMk-'}
            );
        }
        function show(id){
            document.getElementById(id).style.visibility = 'visible';
        }
        function hide(id){
            document.getElementById(id).style.visibility = 'hidden';
        }
        function show_popup(id){
            show(id);
            create_captcha(id);
        }
    </script>
    
    <form name="form1" onsubmit="show_popup('captcha1'); return false" action="test1.html" method="POST">
        <input required />
        <div id="captcha1" class="blind">
            <div class="window">
                <div class="close_button" onclick="hide('captcha1')">x</div>
                <div id="captcha1_container"></div>
                <input type="submit" value="Подтвердить" />
            </div>
        </div>
        <input type="submit" value="Отправить" />
    </form>
    
    <script src='https://www.google.com/recaptcha/api.js?render=explicit' async defer></script> 
    
</body>

В этом коде пока ещё не реализована проверка капчи на стороне клиента и не реализована отправка формы. То есть, по моему мнению, с таким кодом форма вообще не должна отправляться. Но у браузеров почему-то другое мнение, и они эту форму как-то отправляют.

Вот песочница с этим кодом: https://jsfiddle.net/index58/xyv0L2a9/
Причём, форма отправляется не только при нажатии на кнопку "Подтвердить", но и при нажатии на кнопку "Отправить", если закрыть всплывающее окно. На реальном сайте, где ключ соответствует домену, и капча загружается без ошибок, ситуация точно такая же.

Вопрос:
Почему и каким образом браузер отправляет форму, если ему пишут: onsubmit="show_popup('captcha1'); return false" ?

@maxoun · 27.07.2018, 09:13

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

это должно быть проверено браузером (не скриптом

что за идиотизм????

Скрипт покажите .
покажите статус, что пишет http???

@index58 · 27.07.2018, 12:17 **[ТС]**

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

Скрипт покажите

Показывать больше нечего. Здесь представлен весь код.

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

покажите статус, что пишет http???

Не понимаю, о чём идёт речь. Можете подробнее объяснить, что я должен сделать?

@maxoun · 27.07.2018, 16:11

2. Если есть форма

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

Не понимаю, о чём идёт речь. Можете подробнее объяснить, что я должен сделать?

Вы пишете что отправляете POST методом, сперва отправляется потом нет.
так что пишет протокол HTTP когда не отправляется???POST это метод протокола HTTP.

@index58 · 27.07.2018, 17:26 **[ТС]**

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

Вы пишете что отправляете POST методом, сперва отправляется потом нет.

Вообще, наоборот: Сначала форма НЕ отправляется (когда я нажимаю кнопку "Отправить"). Вместо отправки формы появляется всплывающее окно с капчей. И это логично, ведь в обработчике написано "return false". Я так и планировал. Но потом форма почему-то начинает отправляться (когда я нажимаю любую кнопку из двух), и мне непонятно, почему она начала отправляться, если в первый раз не отправлялась.

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

так что пишет протокол HTTP когда не отправляется???POST это метод протокола HTTP.

Друган, я понятия не имею, куда нужно смотреть, чтобы увидеть, что пишет протокол HTTP

Подскажешь?

@AlexZaw · 27.07.2018, 18:06

index58, В качестве костыля можно добавить слушателя события сабмит на форму, в нем отменять отправку и запускать функцию show_popup('captcha1'). Плюс отслеживать нажатие на кнопку "Подтвердить" во всплывающем окне и при клике на нее вызывать у формы метод submit()

@index58 · 27.07.2018, 19:58 **[ТС]**

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

В качестве костыля можно добавить слушателя события сабмит на форму, в нем отменять отправку и запускать функцию show_popup('captcha1').

Вооот, согласен.
Но как сделать так, чтобы сначала отменялась отправка, а только потом запускалась функция show_popup('captcha1')?
Можете пример привести?

@AlexZaw · 27.07.2018, 21:08

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

Можете пример привести?

Убираете в хтмл с формы обработку сабмита, добавляете в скрипты:

JavaScript
1
2
3
4
5
6
7
8
var capForm = document.forms.form1;
capForm.addEventListener('submit', function(e){
e.preventDefault();
show_popup('captcha1');
})
capForm.querySelector('.window > input').onclick = function(){
capForm.submit()
}

@sad67man · 27.07.2018, 23:31

index58, Второй раз происходит отправка из-за ошибки скрипта. "reCAPTCHA has already been rendered in this element". Т.е. скрипт до return false просто не доходит. Конечно ошибок в принципе не должно быть, но чтоб такое исключить лучше сначала отменять отправку формы, а потом уже выполнять код, как было предложено выше.
Почитайте документацию по recaptcha. Вам нужно обновлять каптчу при открытии всплывающего окна. Я уже не помню, как это делается)

@index58 · 28.07.2018, 01:12 **[ТС]**

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

Второй раз происходит отправка из-за ошибки скрипта. "reCAPTCHA has already been rendered in this element". Т.е. скрипт до return false просто не доходит.

Понятно. Спасибо.
Действительно странно, что метод grecaptcha.render() вызывает ошибку.
Понятное дело, что капча должна создаваться один раз, но зачем же ставить разработчиков в такое неудобное положение)))

AlexZaw, спасибо за пример. Я подумаю, но пока сделаю всё-таки по-своему)
Вот окончательный код, работающий у меня корректно:

Кликните здесь для просмотра всего текста

PHP/HTML
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
80
81
82
83
<head>
    <title>Тест 1</title>
    <meta charset="utf-8" />
    <style>
        body {
            font-family: Arial;
        }
        .window {
            position: relative;
            background-color: #AAAAAA;
            color: #000000;
            padding: 20px;
        }
        .close_button {
            position: absolute;
            top: 2px;
            right: 2px;
            padding: 0 2px 0 3px;
            border: 1px solid #000000;
            cursor: pointer;
        }
        .blind {
            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            background-color: rgba(0,0,0,0.6);
            z-index: 20;
            display: flex;
            justify-content: center;
            align-items: center;
            visibility: hidden;
        }
    </style>
</head>
 
 
<body class="window">
    
    <script>
        function show(id){
            document.getElementById(id).style.visibility = 'visible';
        }
        function hide(id){
            document.getElementById(id).style.visibility = 'hidden';
        }
        function create_captcha(id){
            return grecaptcha.render(
                id+'_container',
                {'sitekey' : '6Lf7OjAUAAAAALqk74bX__pCrYgDv6MTN9EfeMk-'}
            );
        }
    var captcha;
        function check_captcha(id){
            if (captcha == undefined){
                show(id);
                captcha = create_captcha(id);
                return false;
            }
            if (grecaptcha.getResponse(captcha).length == 0){
                show(id);
                return false;
            }
            return true;
        }
    </script>
    
    <form name="form1" onsubmit="return check_captcha('captcha1')" action="test1.html" method="POST">
        <input required />
        <div id="captcha1" class="blind">
            <div class="window">
                <div class="close_button" onclick="hide('captcha1')">x</div>
                <div id="captcha1_container"></div>
                <input type="submit" value="Подтвердить" />
            </div>
        </div>
        <input type="submit" value="Отправить" />
    </form>
    
    <script src='https://www.google.com/recaptcha/api.js?render=explicit' async defer></script> 
    
</body>

Вот соответствующая песочница: https://jsfiddle.net/index58/u1zr54tk/

Вопрос решён, всем спасибо.

@AlexZaw · 28.07.2018, 01:56

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

Вот окончательный код, работающий у меня корректно:

Скажите, а в вашем окончательном коде при нажатии в окне с капчей кнопки "Подтвердить" должна отправлятся форма? Потому что у меня нажатие на эту кнопку никакого эффекта не вызывает.

@sad67man · 28.07.2018, 03:11

AlexZaw, Это потому что проверка каптчи не проходит)

@Mr_Sergo · 28.07.2018, 05:17

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

у меня нажатие на эту кнопку никакого эффекта не вызывает

Наверное потому что:

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

На реальном сайте, где ключ соответствует домену

@AlexZaw · 28.07.2018, 08:02

sad67man, zlojnaxa, Ну в первом примере форма пыталась отправиться и с непроверенной капчей.
Я с ней не работал, поэтому и немного поерничал

Уже посмотрел что в коде теперь происходит проверка капчи на стороне клиента.

Новые блоги и статьи Все статьи Все блоги /
Памятка для бота и "визитка" для читателей "Semantic Universe Layer (Слой семантической вселенной)" Hrethgir 19.04.2026 Сгенерировано для краткого описания по случаю сборки и компиляции скелета серверного приложения. И пусть после этого скажут, что статьи сгенерированные AI - туфта и не интересно. И это не реклама -. . .	Запрет удаления строк ТЧ документа при определенном условии Maks 19.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "Аккумуляторы", разработанного в конфигурации КА2. У данного документа есть ТЧ, в которой в зависимости от прав доступа. . .	Модель заражения группы наркоманов alhaos 17.04.2026 Условия задачи сформулированы тут Суть: - Группа наркоманов из 10 человек. - Только один инфицирован ВИЧ. - Колются одной иглой. - Колются раз в день. - Колются последовательно через. . .	Мысли в слух. Про "навсегда". kumehtar 16.04.2026 Подумалось тут, что наверное очень глупо использовать во всяких своих установках понятие "навсегда". Это очень сильное понятие, и я только начинаю понимать край его смысла, не смотря на то что давно. . .
My Business CRM MaGz GoLd 16.04.2026 Всем привет, недавно возникла потребность создать CRM, для личных нужд. Собственно программа предоставляет из себя базу данных клиентов, в которой можно фиксировать звонки, стадии сделки, а также. . .	Знаешь почему 90% людей редко бывают счастливыми? kumehtar 14.04.2026 Потому что они ждут. Ждут выходных, ждут отпуска, ждут удачного момента. . . а удачный момент так и не приходит.	Фиксация колонок в отчете СКД Maks 14.04.2026 Фиксация колонок в СКД отчета типа Таблица. Задача: зафиксировать три левых колонки в отчете. Процедура ПриКомпоновкеРезультата(ДокументРезультат, ДанныеРасшифровки, СтандартнаяОбработка) / / . . .	Настройки VS Code Loafer 13.04.2026 { "cmake. configureOnOpen": false, "diffEditor. ignoreTrimWhitespace": true, "editor. guides. bracketPairs": "active", "extensions. ignoreRecommendations": true, . . .

@AlexZaw Модератор 2381 / 1741 / 677 Регистрация: 07.08.2016 Сообщений: 4,096
	27.07.2018, 18:06
	index58, В качестве костыля можно добавить слушателя события сабмит на форму, в нем отменять отправку и запускать функцию `show_popup('captcha1')`. Плюс отслеживать нажатие на кнопку "Подтвердить" во всплывающем окне и при клике на нее вызывать у формы метод `submit()` 0

@sad67man 2604 / 1508 / 689 Регистрация: 23.08.2015 Сообщений: 3,839
	27.07.2018, 23:31
	Сообщение было отмечено index58 как решение Решение index58, Второй раз происходит отправка из-за ошибки скрипта. "reCAPTCHA has already been rendered in this element". Т.е. скрипт до return false просто не доходит. Конечно ошибок в принципе не должно быть, но чтоб такое исключить лучше сначала отменять отправку формы, а потом уже выполнять код, как было предложено выше. Почитайте документацию по recaptcha. Вам нужно обновлять каптчу при открытии всплывающего окна. Я уже не помню, как это делается) 1

@sad67man 2604 / 1508 / 689 Регистрация: 23.08.2015 Сообщений: 3,839
	28.07.2018, 03:11
	AlexZaw, Это потому что проверка каптчи не проходит) 0

@AlexZaw Модератор 2381 / 1741 / 677 Регистрация: 07.08.2016 Сообщений: 4,096
	28.07.2018, 08:02
	sad67man, zlojnaxa, Ну в первом примере форма пыталась отправиться и с непроверенной капчей. Я с ней не работал, поэтому и немного поерничал Уже посмотрел что в коде теперь происходит проверка капчи на стороне клиента. 0

ReCAPTCHA во всплывающем окне

Решение