Discussion :

[bndd24]

Salut

Voila, je ne sais pas pourquoi mon champ hidden (de mon ContactType.php) ne récupère pas la valeur de retour de mon code javascript !
doc google sur le recaptcha :
https://developers.google.com/recapt..._the_challenge

Code twig :

Sélectionner tout - Visualiser dans une fenêtre à part

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
{% extends 'base.html.twig' %}
 
{% block title %}Nous contacter{% endblock %}
 
{% block body %}
<div class="container">
    <h1>Nous contacter</h1>
 
    {{ form_start(form) }}
 
    <div class="row">
        <div class="col-6">{{ form_row(form.firstName) }}</div>
        <div class="col-6">{{ form_row(form.lastName) }}</div>
        <div class="col-12">{{ form_row(form.email) }}</div>
        <div class="col-12">{{ form_row(form.subject) }}</div>
        <div class="col-12">{{ form_row(form.message) }}</div>
    </div>
 
    <button class="btn btn-primary">Envoyer</button>
    {{ form_end(form) }}
</div>
{% endblock %}
 
{% block javascripts %}
 
<script src="https://www.google.com/recaptcha/api.js?render=6LeFdHceAAAAABzqrLrfm_EqX5mSMhk-YhPaApJg"></script>
 
<script>
 
    window.onload = function () {
        //document.getElementById('contact_recaptcha').value = 'test1' // c'est une ligne de test et cette ligne envoie bien test1 au champ contact_recaptcha (masqué) ICI PAS DE PROBLEME donc c'est bien du au code plus bas ou bien a la librairie que j'utilise peut être mal ?
 
        function onClick(e) {
            e.preventDefault();
            grecaptcha.ready(function () {
                grecaptcha.execute('6LeFdHceAAAAABzqrLrfm_EqX5mSMhk-YhPaApJg', { action: 'submit' }).then(function (token) {
                    // Add your logic to submit to your backend server here.
                    document.getElementById('contact_recaptcha').value = 'test2' // cette ligne envoie pas test2 au champ contact_recaptcha ! Je ne sais pas pourquoi (je ne maitrise pas très bien javascript, je suis simplement la doc google sur le recaptcha)
                });
            });
        }
 
    }
</script>
 
{% endblock %}

mon objectif est que je récupère la valeur "test2"...

quelqu'un aurait-il une idée du problème rencontré ? Je vous remercie

[Celira]

Question bête : cette fonction js onClick tu l'utilises quelque part ? parce que là, je vois la définition mais pas l'utilisation...

[bndd24]

enfin une réponse a ma demande
Je suis dessus depuis 15 jours : ras le bol pour être honnête avec toi.

Je ne maitrise pas le Javascript, mon objectif est simplement de mettre en place le reCAPTCHA de google (v3) sur un simple form de contact symfony, pour cela j'ai simplement copié les exemples ici :
https://developers.google.com/recaptcha/docs/v3

mais cela ne fonctionne pas, je ne comprends pas. en gros, je ne sais pas si je dois créer un champ genre hidden qui récupère le "token" ou si je dois utiliser le premier exemple dans la doc, car avec le premier exemple, mon bouton ne fonctionne plus du tout...... :/ Je ne sais pas si je suis très clair dans mes explications

[darkstar123456]

Bonjour,

Est-ce qu'un champ portant un attribut id="contact_recaptcha" existe ?
En lisant le bout de code, ça ne semble pas être le cas.
Le plus simple pour débuger ça dans un premier temps (ou si vous n'avez pas l'habitude), est de changer type="hidden" en type="text".

En effet, si la valeur n'existe pas et si le champ n'existe pas, alors on ne risque pas de retrouver sa valeur après la soumission du formulaire :-)

NB : pour la récupération de la valeur après soumission c'est l'attribut name qui compte, donc si vous écrivez :
<input type="hidden" name="recaptcha-response" id="contact_recaptcha" />,
c'est bien $_POST['recaptcha-response'] que vous devrez utiliser dans votre controller pour lire la valeur


Sinon, comme l'a dit @Celira, en regardant ce simple bout de code la fonction onClick n'est probablement jamais appelée.
D'après la doc, il faut soit ajouter des attributs data avec une classe g-recaptcha sur le bouton pour indiquer quelle fonction utiliser.
Pour l'avoir déjà lue et utilisée, cette doc est très incomplète je trouve car il y a juste des bouts de code sans la moindre explication

EDIT : Ca faisait longtemps que je n'avais plus fait de reCaptcha, je suis donc allé faire un test dans mon coin.
Voici ce qu'il suffit de faire (et c'est ce que montre la doc sans l'expliquer) :
1. donner un ID à son formulaire
2. ajouter classe g-recaptcha au bouton submit, ainsi que les autres attributs (data-sitekey, data-callback et data-action)
3. ajouter la fonction définie dans l'attribut data-callback en Javascript

Voici donc un exemple :
(j'ai mis des noms volontairement longs et bêtes mais qui évitent toute confusion)

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<form id="contact-form-cest-son-nom" method="post" action="">
.... ici les champs du formulaire ...
<button type="submit" class="btn btn-primary g-recaptcha"
		data-sitekey="________reCAPTCHA_site_key__A_CHANGER________" 
		data-callback="onSubmitJajouteAutomatiquementLaReponseAuFormulaire" 
		data-action="submit">Envoyer</button>
</form>
<script>
        function onSubmitJajouteAutomatiquementLaReponseAuFormulaire(token) {
                document.getElementById("contact-form-cest-son-nom").submit();
        }
</script>

Test visible en live ici : https://tests.pierre-roels.com/recaptcha-v3.php

[bndd24]

Salut,

J'ai déjà passé le type en "text" afin de mieux debuggé le problème, il est présent dans le contactType.php (symfony insert automatiquement les champs dans le twig, comme ce n'est pas un champ que je veux visible par la suite je n'ai donc pas pris la peine de le mettre dans le row) mais je le vois bien dans l'affichage de mon formulaire donc aucun problème de ce coté la. et c'est bien ce champ qui porte l'id "contact_recaptcha"

en gros je veux que google m'envoie le token dessus.

par la suite pour la récupération dans la super global post et le traitement etc aucun problème pour moi coté back end

[darkstar123456]

Rebonjour,

J'ai édité mon post avec un code fonctionnel (pendant la rédaction de votre réponse je crois), je vous invite à le tester en mettant à jour votre code

D'ailleurs, n'oubliez pas qu'il faut valider le token côté serveur par la suite

De ce que je comprends de votre code, vous mixez la méthode automatique et la méthode programmatique.
Si vous souhaitez utiliser la méthode avec la fonction onClick, vous devez déclencher manuellement l'appel à cette fonction.
Je vous conseillerais de passer plutôt par l'ajout d'un ID sur le fomulaire, ainsi que la classe et les data-attributes sur le bouton submit si vous n'êtes pas à l'aise en JS

[bndd24]

J'ai testé votre code, et c'est exactement le même problème qu'avec mon code, le bouton Envoyer ne réagi pas.

Ma console m'affiche :
"ReCAPTCHA couldn't find user-provided function: onSubmitJajouteAutomatiquementLaReponseAuFormulaire"

Voici l'intégralité de mon code :

Code twig :

Sélectionner tout - Visualiser dans une fenêtre à part

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
{% extends 'base.html.twig' %}
 
{% block title %}Nous contacter{% endblock %}
 
{% block body %}
<div class="container">
    <h1>Nous contacter</h1>
 
    {{ form_start(form) }}
 
    <div class="row">
        <div class="col-6">{{ form_row(form.firstName) }}</div>
        <div class="col-6">{{ form_row(form.lastName) }}</div>
        <div class="col-12">{{ form_row(form.email) }}</div>
        <div class="col-12">{{ form_row(form.subject) }}</div>
        <div class="col-12">{{ form_row(form.message) }}</div>
        <div class="col-12">{{ form_row(form.recaptcha) }}</div>
    </div>
 
    <button type="submit" 
            class="btn btn-primary g-recaptcha" 
            data-sitekey="6LeFdHceAAAAABzqrLrfm_EqX5mSMhk-YhPaApJg" 
            data-callback="onSubmitJajouteAutomatiquementLaReponseAuFormulaire" 
            data-action="submit">Envoyer</button>
 
    {{ form_end(form) }}
</div>
{% endblock %}
 
{% block javascripts %}
 
<script src="https://www.google.com/recaptcha/api.js?render=6LeFdHceAAAAABzqrLrfm_EqX5mSMhk-YhPaApJg" async defer></script>
 
<script>
    window.onload = function () {
 
        function onSubmitJajouteAutomatiquementLaReponseAuFormulaire(token) {
            // j'ai essayé les deux versions 1 et 2 :
            document.getElementById("contact_recaptcha").value = token; // 1 : ici c'est la solution pour envoyer le token au champ recaptcha, l'id du champ est "contact_recaptcha"
            document.getElementById("contact").submit();                // 2 : et ici c'est l'id du formulaire
        }
 
    }
</script>
 
{% endblock %}

Mon ContactType (même si y'a rien a dire dessus je pense) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<?php
 
namespace App\Form;
 
use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\OptionsResolver\OptionsResolver;
use Symfony\Component\Form\Extension\Core\Type\TextType;
use Symfony\Component\Form\Extension\Core\Type\EmailType;
use Symfony\Component\Form\Extension\Core\Type\HiddenType;
use Symfony\Component\Form\Extension\Core\Type\TextareaType;
 
class ContactType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options): void
    {
        $builder
            ->add('firstName', TextType::class)
            ->add('lastName', TextType::class)
            ->add('email', EmailType::class)
            ->add('subject', TextType::class)
            ->add('message', TextareaType::class)
            ->add('recaptcha', TextType::class) // pour les tests je laisse en Text...
        ;
    }
 
    public function configureOptions(OptionsResolver $resolver): void
    {
        $resolver->setDefaults([
            'translation_domain' => 'forms',
        ]);
    }
}

Ce que je peux dire a l'instant T :
Je peux certifier que la clé public est bien valide car je viens de la copier une nouvelle fois a partir de la console google
Je peux également certifier l'exactitude des champs id

merci pour ton aide
je suis d'accord avec toi, la doc est vraiment légère franchement :/
pour la validation du token oui, je pense pouvoir m'en sortir, je suis bien plus a l'aise avec le back que le front

[darkstar123456]

Bonjour,

Pourquoi avez-vous mis la fonction dans l'événement onload de window ?
Vous déplacez le scope de la fonction en faisant ça; et donc la fonction est inaccessible.

IMPORTANT : Si vous avez des messages d'erreur, il faut le mentionner dès la demande initiale Ca accélère souvent beaucoup le processus de résolution ^^

Essayez avec ce code (strictement ) :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<script>
	function onSubmitJajouteAutomatiquementLaReponseAuFormulaire(token) {
		document.getElementById("contact").submit(); // C'est bien l'ID du formulaire qu'il faut ;)
	}
</script>

PS : Je vous invite à mettre des meilleurs noms de fonction, c'était surtout pour différentier les différents attributs

[bndd24]

bon.. léger progrès lorsque je clic sur le Bouton Envoyer, mon champ se rempli bien avec le token et le formulaire s'envoi correctement, mais je n'ai plus la validation html5 des champs requis pourtant il y a bien évidemment écrit required="required" pour chaque champ..

[darkstar123456]

Bonjour,

La méthode automatique fait perdre la validation HTML5.
Il y aurait moyen de vérifier si le formulaire est valide avant de l'envoyer mais alors il faudra aussi passer par l'affichage "custom" des erreurs (c'est à dire faire vous-même la validation et l'affichage des erreurs)
Donc c'est pas ouf dans votre cas je pense

Du coup, il faut repasser par la méthode programmatique et donc appeler soi-même une fonction de validation et assigner la valeur de la réponse manuellement.
Normalement vous étiez parti là-dessus donc j'imagine que vous avez toujours votre input hidden qui s'affiche de cette façon : <input type="hidden" name="g-recaptcha-response" id="contact_recaptcha" value="" />NB : Pour l'attribut name, j'ai choisi g-recaptcha-response car c'est le nom standard donné par Google et donc si vous aviez déjà fait tout le reste de la logique de validation, il n'y aura pas besoin de changer quoi que ce soit

Modification :
1. ajouter la clé publique au chargement du JS de Recaptcha : <script src="https://www.google.com/recaptcha/api.js?render=____PUBLIC_KEY____"></script>.
2. retirer la classe g-recaptcha et les attributs data- du bouton submit
3. remplacer la fonction actuelle par sa cousine programmatique (pensez à remplacer ____ID_DU_FORMULAIRE___ et ____PUBLIC_KEY____ dans le code) :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script>
    var form = document.getElementById("____ID_DU_FORMULAIRE___");
    // On va intercepter l'événement submit de notre formulaire
    form.addEventListener('submit', function (event) {
        // preventDefault & return false permettent de s'assurer d'empêcher à 100% d'envoyer le formulaire
        // de cette façon, seul un envoi manuel/programmatique peut envoyer le formulaire
        event.preventDefault();
        valideRecaptcha(event);
        return false;
    });
 
    function valideRecaptcha(e) {
        e.preventDefault();
        grecaptcha.ready(function () {
            grecaptcha.execute("____PUBLIC_KEY____", {action: 'submit'}).then(function (token) {
                // On assigne la valeur reçue à notre input hidden afin qu'il soit soumis en même temps que le reste du formulaire
                document.getElementById("contact_recaptcha").value = token;
                // Envoi programmatique du formulaire
                form.submit();
            });
        });
    }
</script>

J'ai également mis mon live exemple à jour : https://tests.pierre-roels.com/recaptcha-v3.php

NB : Pour rendre le code plus facilement réutilisable partout, je conseillerais de changer la ligne :
document.getElementById("contact_recaptcha").value = token; par :
form.querySelector('[name="g-recaptcha-response"]').value = token; ;
Cette dernière permet de chercher par l'attribut name à l'intérieur d'un parent (form défini dans le code plus haut) plutôt qu'un ID global sur la page.
C'est avec ce code que j'ai mis à jour mon live exemple

EDIT & NB :
J'ai oublié de le préciser mais il est bien mieux d'intercepter l'événement submit plutôt que ce qu'on voit parfois, le click sur le bouton submit.
En interceptant l'événement submit, ça laisse la possibilité à l'utilisateur de valider son formulaire en appuyant sur ENTER plutôt que de l'obliger à cliquer sur le bouton avec sa souris

[bndd24]

J'ai lu attentivement ton post mais cela ne fonctionne pas malheureusement

Le formulaire est bien envoyé mais pas de valeur dans le contact_recaptcha ! la super global POST est complète pour les autres champs sauf pour le contact_recaptcha qui reste vide..

Je pense avoir bien fait les choses...

Code twig :

Sélectionner tout - Visualiser dans une fenêtre à part

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
{% extends 'base.html.twig' %}
 
{% block title %}Nous contacter{% endblock %}
 
{% block body %}
<div class="container">
    <h1>Nous contacter</h1>
 
    {{ form_start(form) }}
 
    <div class="row">
        <div class="col-6">{{ form_row(form.firstName) }}</div>
        <div class="col-6">{{ form_row(form.lastName) }}</div>
        <div class="col-12">{{ form_row(form.email) }}</div>
        <div class="col-12">{{ form_row(form.subject) }}</div>
        <div class="col-12">{{ form_row(form.message) }}</div>
        <div class="col-12">{{ form_row(form.recaptcha) }}</div>
    </div>
 
    <button type="submit" class="btn btn-primary">Envoyer</button>
 
    {{ form_end(form) }}
</div>
{% endblock %}
 
{% block javascripts %}
 
<script src="https://www.google.com/recaptcha/api.js?render=6LeFdHceAAAAABzqrLrfm_EqX5mSMhk-YhPaApJg"></script>
 
<script>
 
    var form = document.getElementById("contact");
    // On va intercepter l'événement submit de notre formulaire
    form.addEventListener('submit', function (event) {
        // preventDefault & return false permettent de s'assurer d'empêcher à 100% d'envoyer le formulaire
        // de cette façon, seul un envoi manuel/programmatique peut envoyer le formulaire
        event.preventDefault();
        valideRecaptcha(event);
        return false;
    });
 
    function valideRecaptcha(e) {
        e.preventDefault();
        grecaptcha.ready(function () {
            grecaptcha.execute("6LeFdHceAAAAABzqrLrfm_EqX5mSMhk-YhPaApJg", { action: 'submit' }).then(function (token) {
                // On assigne la valeur reçue à notre input hidden afin qu'il soit soumis en même temps que le reste du formulaire
                document.getElementById("contact_recaptcha").value = token; // pour le moment je laisse le getElementById
                // Envoi programmatique du formulaire
                form.submit();
            });
        });
    }
 
</script>
 
{% endblock %}

ps : une question, si j'ai bien compris la portion js du haut bloque l'envoi du formulaire et la portion du bas envoie le formulaire

je me casse la tête depuis 16/17 jours il faut vraiment que je pense a prendre des cours de js

[darkstar123456]

Hello,

Difficile à dire.
Depuis le début tu dis qu'il n'y a rien à redire sur la partie PHP du formulaire et j'avoue ne pas y avoir accordé de l'importance.
Cependant, en essayant de trouver des infos j'ai relu tout ce que tu as partagé et impossible de trouver où tu définis l'ID de ton formulaire ou du champ recaptcha-response.
Or ce sont 2 pré-requis pour pouvoir mettre à jour la valeur des champs et soumettre le formulaire.

D'ailleurs, la vue TWIG on s'en fou un peu (à part pour la partie JS qui, elle, est complète)
Je t'invite à regarder directement dans le code source HTML afin de vérifier les attributs ID du formulaire et du champ.
Tu peux également nous partager ce code (tout ce qui se trouve entre <form> et </form> - INCLUS)

Pour débugger si ton code passe bien parmi les fonctions, tu peux ajouter des console.log() pour tracer le passage dans les différentes fonction.
Tu peux également mettre en commentaire la ligne form.submit();; si le formulaire arrive à s'envoyer, c'est que aucun code JS n'est exécuté

Sinon, c'est +/- ce que tu as décrit : la première partie du code Javascript bloque l'envoi du formulaire
Dans la seconde partie, il y a une nuance : on envoie programmatiquement le formulaire, uniquement si on a une réponse de Google Recaptcha

[bndd24]

Voici l'intégralité de la source de la page (désolé pour la mise en forme, c'est une copie de la source) pour moi tout me semble correct....

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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
84
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
        <title>Nous contacter</title>
 
                    <link rel="stylesheet" href="/build/app.css">
 
 
<script src="https://www.google.com/recaptcha/api.js?render=6LeFdHceAAAAABzqrLrfm_EqX5mSMhk-YhPaApJg"></script>
 
<script>
 
    var form = document.getElementById("contact");
    // On va intercepter l'événement submit de notre formulaire
    form.addEventListener('submit', function (event) {
        // preventDefault & return false permettent de s'assurer d'empêcher à 100% d'envoyer le formulaire
        // de cette façon, seul un envoi manuel/programmatique peut envoyer le formulaire
        event.preventDefault();
        valideRecaptcha(event);
        return false;
    });
 
    function valideRecaptcha(e) {
        e.preventDefault();
        grecaptcha.ready(function () {
            grecaptcha.execute("6LeFdHceAAAAABzqrLrfm_EqX5mSMhk-YhPaApJg", { action: 'submit' }).then(function (token) {
                // On assigne la valeur reçue à notre input hidden afin qu'il soit soumis en même temps que le reste du formulaire
                document.getElementById("contact_recaptcha").value = token; // pour le moment je laisse le getElementById
                // Envoi programmatique du formulaire
                form.submit();
            });
        });
    }
 
</script>
 
    </head>
    <body>
        <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
    <div class="container-md">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
            aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                                <li class="nav-item">
                    <a class="nav-link" href="/login">Se connecter</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/register">S'inscrire</a>
                </li>
                                <li class="nav-item">
                    <a class="nav-link" href="/purchase">Paiement</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/contact">Nous contacter</a>
                </li>
            </ul>
        </div>
    </div>
</nav>
 
 
        <div class="container my-2">
    </div>
 
 
        <div class="container">
    <h1>Nous contacter</h1>
 
    <form name="contact" method="post" id="contact">
 
    <div class="row">
        <div class="col-6"><div class="mb-3"><label for="contact_firstName" class="form-label required">Prénom</label><input type="text" id="contact_firstName" name="contact[firstName]" required="required" class="form-control" />        </div></div>
        <div class="col-6"><div class="mb-3"><label for="contact_lastName" class="form-label required">Nom</label><input type="text" id="contact_lastName" name="contact[lastName]" required="required" class="form-control" />        </div></div>
        <div class="col-12"><div class="mb-3"><label for="contact_email" class="form-label required">Email</label><input type="email" id="contact_email" name="contact[email]" required="required" class="form-control" />        </div></div>
        <div class="col-12"><div class="mb-3"><label for="contact_subject" class="form-label required">Sujet</label><input type="text" id="contact_subject" name="contact[subject]" required="required" class="form-control" />        </div></div>
        <div class="col-12"><div class="mb-3"><label for="contact_message" class="form-label required">Message</label><textarea id="contact_message" name="contact[message]" required="required" class="form-control"></textarea>        </div></div>
        <div class="col-12"><div class="mb-3"><label for="contact_recaptcha" class="form-label required">Recaptcha</label><input type="text" id="contact_recaptcha" name="contact[recaptcha]" required="required" class="form-control" />        </div></div>
    </div>
 
    <button type="submit" class="btn btn-primary">Envoyer</button>
 
    <input type="hidden" id="contact__token" name="contact[_token]" value="cac312f1abccb2d12.kHwWYHx_GE7Lizmoy12RcdPl67Rio2I1ExqE0QwofQk.xAoiDE8pdB6N6FfRii_cGpyXqsQJxy52S1blmXhGEGPIT1EHNzBIe4DlTg" /></form>
</div>
 
</body>
</html>

[darkstar123456]

OUILLE MES YEUX !!! Du javascript dans entre les balises <head></head> !!!

Plus sérieusement, je te conseillerais de plutôt mettre le javascript tout en bas du site.
D'une part, c'est beaucoup mieux car s'il y a du code bloquant dans le code Javascript ça bloquera également le chargement du site (qu'il s'agisse d'un code bloquant ou d'une erreur fatale)
D'autre part, c'est toujours plus safe d'exécuter le Javascript quand tout le DOM est chargé et donc il y a plus de chance que ça arrive en fin de page qu'au début

Je comprends mieux à présent l'utilisation un peu obligatoire de window.onload

Dans ce cas-ci, tu peux simplement le rajouter autour de ta fonction (et c'est vrai que normalement c'est plus propre et je le mets toujours habituellement) et ça fonctionnera sans mettre dans le footer :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<script>
    window.onload = function () {
        var form = document.getElementById("contact");
        // On va intercepter l'événement submit de notre formulaire
        form.addEventListener('submit', function (event) {
            // preventDefault & return false permettent de s'assurer d'empêcher à 100% d'envoyer le formulaire
            // de cette façon, seul un envoi manuel/programmatique peut envoyer le formulaire
            event.preventDefault();
            valideRecaptcha(event);
            return false;
        });
 
        function valideRecaptcha(e) {
            e.preventDefault();
            grecaptcha.ready(function () {
                grecaptcha.execute("6LeFdHceAAAAABzqrLrfm_EqX5mSMhk-YhPaApJg", {action: 'submit'}).then(function (token) {
                    // On assigne la valeur reçue à notre input hidden afin qu'il soit soumis en même temps que le reste du formulaire
                    document.getElementById("contact_recaptcha").value = token; // pour le moment je laisse le getElementById
                    // Envoi programmatique du formulaire
                    form.submit();
                });
            });
        }
    }
</script>

Par contre, j'insiste que tous les scripts trouvent mieux leur place dans le footer juste avant </body> ^^


EDIT :
J'ai fait un peu de zèle. Car autant les scripts devraient être dans le footer, autant je trouve ça plus propre que ça se trouve dans un fichier à part
Et surtout, ce que j'aime, c'est de pouvoir réutiliser le même code partout !

Donc voici un code que tu peux mettre dans un fichier à part.
Pour qu'un formulaire utilise la validation recaptcha, il suffit de lui mettre la classe form-recaptcha et que l'input [name="g-recaptcha-response"] existe en son sein.
Il fonctionne même s'il y a plusieurs formulaires sur la même page (j'ai mis mon code live test à jour)
PS : Il faudra évidemment remettre ta clé à la place de ___PUBLIC_KEY___

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<script>
    window.onload = function () {
        // Pour tous les formulaires portant la class "form-recaptcha"
        document.querySelectorAll(".form-recaptcha").forEach(function (form) {
            // On va intercepter l'événement submit de notre formulaire
            form.addEventListener('submit', function (event) {
                // preventDefault & return false permettent de s'assurer d'empêcher à 100% d'envoyer le formulaire
                // de cette façon, seul un envoi manuel/programmatique peut envoyer le formulaire
                event.preventDefault();
                valideRecaptcha(form, event);
                return false;
            });
        });
 
 
        function valideRecaptcha(form, e) {
            e.preventDefault();
            grecaptcha.ready(function () {
                grecaptcha.execute("___PUBLIC_KEY___", {action: 'submit'}).then(function (token) {
                    // On assigne la valeur reçue à notre input hidden afin qu'il soit soumis en même temps que le reste du formulaire
                    form.querySelector('[name="g-recaptcha-response"]').value = token;
                    // Envoi programmatique du formulaire
                    form.submit();
                });
            });
        }
    }
</script>

[bndd24]

cette fois avec le window.onload tout fonctionne

Pour l'emplacement du Javascript, mon explication :

Mon js est gérer automatiquement par webpack Encore de Symfony une fois que le build sera effectué.
Pour les tests il est conseillé de faire un block javascript sur la page twig ceci afin de ne pas avoir a build a chaque modification. Une fois le code testé et opérationnel (comme c'est le cas maintenant grâce a toi ) il sera placé dans un fichier js dans le dossier asset gérer par webpack.

[darkstar123456]

J'ai déjà fait du Symfony et en parcourant la doc, je ne suis jamais tombé sur quelque chose qui décrit le fait de tester du inline... je trouve cette démarche très étrange
C'est beaucoup plus compliqué et moins propre... je ne vois pas de logique à ça
Surtout que normalement Webpack vient avec un "watch" qui ne compile que les types de fichiers qui ont été modifés (par exemple que le JS ou que le CSS) et ce n'est pas très long (surtout que le watch fait bcp moins de choses que la compilation complète)...

Et quand bien même, ça ne change en rien le fait que les blocks peuvent être placés n'importe où
Donc dans ton layout TWIG qui défini l'emplacement des blocks, le bloc {% block javascripts %} devrait être vers la fin du site et non dans le <head>

Enfin, Webpack n'a rien à voir avec le placement des fichiers dans le code. Il s'agit juste de la compilation des assets
Donc il est possible (et même fort à parier) que tes fichiers JS se chargent dans le <head> également, à moins que tu aies plusieurs blocks "javascripts" :thinking:

PS : Oublie pas de mettre le sujet en "Résolu"

[bndd24]

J'ai déjà fait du Symfony et en parcourant la doc, je ne suis jamais tombé sur quelque chose qui décrit le fait de tester du inline... je trouve cette démarche très étrange
C'est beaucoup plus compliqué et moins propre... je ne vois pas de logique à ça
Surtout que normalement Webpack vient avec un "watch" qui ne compile que les types de fichiers qui ont été modifés (par exemple que le JS ou que le CSS) et ce n'est pas très long (surtout que le watch fait bcp moins de choses que la compilation complète)...

oui, c'est beaucoup moins propre évidement, mais il y a 15 jours je voulais simplement faire un petit test a la "va vite" du recaptcha google, sans pour autant penser que cela prendrait aussi longtemps pour moi^^ je vais bien sûr le mettre dans un entrypoint webpack séparément du code javascript de base.

Et quand bien même, ça ne change en rien le fait que les blocks peuvent être placés n'importe où
Donc dans ton layout TWIG qui défini l'emplacement des blocks, le bloc {% block javascripts %} devrait être vers la fin du site et non dans le <head>

mais c'est déjà le cas, regarde bien dans mon twig, le block javascript est au bas de la page. (attention : la dernière source que je donne dans mon post c'est la source a partir du clic droit sur le navigateur car tu voulais voir la source du form etc.. et non la source propre de mon application je ne sais pas si tu vois, j'explique pas correctement parfois^^ )

Enfin, Webpack n'a rien à voir avec le placement des fichiers dans le code. Il s'agit juste de la compilation des assets
Donc il est possible (et même fort à parier) que tes fichiers JS se chargent dans le <head> également, à moins que tu aies plusieurs blocks "javascripts" :thinking:

non, pas seulement la compilation, "Encore" apporte une surcouche a Webpack afin de gérer les assets proprement dans le dossier public, mais propose également la création d'entrypoint. A la création d'une appli standard Symfony, le block de répercussion javascript est bien entre les balises head.

voici un exemple de mon code (qui est d'ailleurs le code par défaut des appli sf6)

Code twig :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
        <title>{% block title %}Welcome!{% endblock %}</title>
 
        {% block stylesheets %}
            {{ encore_entry_link_tags('app') }}
        {% endblock %}
 
        {% block javascripts %}
            {{ encore_entry_script_tags('app') }}
        {% endblock %}
    </head>

PS : Oublie pas de mettre le sujet en "Résolu"

oui c'est fait ! et encore milles merci, c'est vraiment bien et malheureusement trop rare d'avoir une aide assidue. Je te remercie

[darkstar123456]

Hello,

Je me permets de vite fait continuer cette discussion car, comme je le pensais, il te manque une petite notion de "blocks"

Dans ton fichier TWIG de template (appellons-le contact.html.twig), le block javascripts se trouve bel et bien en bas du fichier mais ça ne veut rien dire.
En effet, comme on peut lire en première lire de fichier il extend un LAYOUT (c'est pour ça que j'ai fait la différence entre template et layout dans mon dernier message ) (code : {% extends 'base.html.twig' %})

Et si on regarde ce code, ça confirme ce que je disais : le bloc javascripts est bel et bien dans le header au lieu d'être à la fin du chargement du site.
Tu l'as toi-même montré en affichant le code du layout (t'as pas précisé mais j'imagine que c'est le layout, à mois que ça soit un header qui étend lui-même le layout mais peu importe, ça ne change rien)
L'organisation des blocks se fait dans le modèle parent (celui qui est étendu donc) et donc dans ton fichier template (contact.html.twig), tu peux écrire tes blocks dans n'importe quel ordre, c'est la compilation TWIG qui ira les mettre au bon endroit dans ton layout. D'ailleurs tu pourrais écrire dans ton template (contact.html.twig) et ça ne s'affichera jamais car le bloc n'existe pas dans le layout :

Code twig :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
{% block ce_bloc_nexiste_pas %}
            COUCOUCOUOU 
        {% endblock %}

Et donc voici le code que tu viens de partager et qui est probablement le layout (base.html.twig) (ce qui se confirme d'après le code source du Github)
On y voir la définition du block javascripts dans les balises <head></head>

Code twig :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
        <title>{% block title %}Welcome!{% endblock %}</title>
 
        {% block stylesheets %}
            {{ encore_entry_link_tags('app') }}
        {% endblock %}
 
        {% block javascripts %}
            {{ encore_entry_script_tags('app') }}
        {% endblock %}
    </head>

[bndd24]

oui exactement, je suis bien d'accord avec toi. Mais dans un message précèdent tu expliques qu'avoir du javascript entre les balises head est une mauvaise pratique (ou c'est du moins ce que j'ai compris car tu dis OUILLE MES YEUX !!! Du javascript dans entre les balises <head></head> !!!
mais c'est le "paramétrage" par défaut des applications Symfony.

Lorsque ton pagetruc.html.twig contient un block javascripts -> le base.html.twig rajoute ce code entre les balises head, ceci est le comportement par défaut.

EDIT : enfin la page en question quoi....

[darkstar123456]

Hello,

Oui, et je pense que c'est bien ce que je dis du coup
Symfony ne met pas le JS dans le head par principe, il met le JS là où il est défini dans le layout/template TWIG.

Pour tester, je t'invite à supprimer les lignes de base.html.twig :

Code twig :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
{% block javascripts %}
            {{ encore_entry_script_tags('app') }}
        {% endblock %}

Et plus aucun JS ne se trouvera sur ta page; d'où le fait que je disais qu'il vaut mieux déplacer ce bloc du layout en bas de fichier

J'ai testé de mon côté en setupant en vitesse un Symfony.
Voici mon layout base.html.twig :

Code twig :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>{% block title %}Welcome!{% endblock %}</title>
        <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>⚫️</text></svg>">
        {# Run `composer require symfony/webpack-encore-bundle` to start using Symfony UX #}
        {% block stylesheets %}
            {{ encore_entry_link_tags('app') }}
        {% endblock %}
 
    </head>
    <body>
        {% block body %}{% endblock %}
 
        {% block javascripts %}
            {{ encore_entry_script_tags('app') }}
        {% endblock %}
    </body>
</html>

Code HTML généré :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Welcome!</title>
        <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>⚫️</text></svg>">
                            <link rel="stylesheet" href="/build/app.css">
 
    </head>
    <body>
 
                    <script src="/build/runtime.js" defer></script><script src="/build/vendors-node_modules_symfony_stimulus-bridge_dist_index_js-node_modules_core-js_modules_es_ob-bca252.js" defer></script><script src="/build/app.js" defer></script>
</body>
</html>