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, Ну в первом примере форма пыталась отправиться и с непроверенной капчей.
Я с ней не работал, поэтому и немного поерничал

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

Новые блоги и статьи Все статьи Все блоги /
PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Access VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .

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

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

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

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

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

Решение