reCaptcha v2 in combinatie met de jQuery Validation plugin

[Verwijderd]

Beste mensen,

Ik ben al een paar dagen bezig met reCaptcha v2 op een webformulier in combinatie met de jQuery Validation plugin ( https://jqueryvalidation.org/validate/ ).

Nu vond ik op Stackoverflow een handig antwoord hierover. Zie https://stackoverflow.com...-jquery-validation-plugin (en dan het antwoord met de 33 punten).

Het werkt hier echter maar voor de helft. Het probleem is hier dat het alleen werkt als je eerst vergeet de reCaptcha aan te vinken, en dus de validatieplugin zijn ding doet en met de waarschuwingen bij het vergeten veldje(s) komt. Maar vink je de reCaptcha meteen goed aan, dan ververst de pagina zichzelf als je op verzend klikt. Iets dat volgens mij niet zou moeten mogen. Ik kan dan ook niets op de console zien want ik zit dan weer tegen de lege ververste pagina aan te kijken.

HTML-code (een beetje vereenvoudigd zonder bootstrap opmaak):

code:

<form class="form email" id="contactformulier">

<input name="name" type="text"  id="name" placeholder="Your Name" required>
<input name="email" type="email"id="email" placeholder="Your Email" required>
<input name="subject" type="text"id="subject" placeholder="Subject">
<textarea name="message" id="message" rows="4" placeholder="Your Message" required></textarea>

<script src="https://www.google.com/recaptcha/api.js"></script>
<div class="g-recaptcha" data-sitekey="xxxxxxxxxxxxxxxxxxxxxxxxx" data-callback="recaptchaCallback">
<input type="hidden" class="hiddenRecaptcha required" name="hiddenRecaptcha" id="hiddenRecaptcha">

<div class="notificatie"></div>
<button type="submit" class="btn btn-primary" >Verzend Bericht</button>
</form>

jQuery:

code:

$(document).ready(function($) {
    "use strict";
        
        //  Form Validation
    $(".form.email .btn[type='submit']").on("click", function(e){
        var button = $(this);
        var form = $(this).closest("form");
                
                form.validate( {
                    ignore: ".ignore",
                    rules: {
                            hiddenRecaptcha: {
                                    required: function () {
                                            if (grecaptcha.getResponse() == '') {
                                                    return true;
                                            } else {
                                                    return false;
                                            }
                                    }
                            }
                    },                  
                    messages: {
                                    hiddenRecaptcha: "Je moet deze spambeveiliging nog even aanvinken",
                    },          
                    submitHandler: function() {
                            $.post("assets/php/email.php", form.serialize(),  function(response) {
                                    $(".notificatie").html(response);
                                    form.addClass("submitted");
                            });
                            return false;
                    }
                });
                    
    });
});


function recaptchaCallback() {
  $('#hiddenRecaptcha').valid();
};

Misschien ziet er iemand gelijk al waarom de reCaptcha de eerste keer niet doorkomt?

[ Voor 7% gewijzigd door Verwijderd op 01-11-2017 14:43 ]

[Kontsnorretje]

Kijk even naar je form variable in je submitHandler. Denk dat daar iets mis gaat

Edit: even in de war. Lijkt erop dat je form submit event niet gecancelled wordt. De validate plugin valideert alleen en stopt het submit event niet.

[ Voor 47% gewijzigd door Kontsnorretje op 30-10-2017 21:28 ]

[Verwijderd]

@Kontsnorretje (mooie naam )
Nou, zonder die reCaptcha doet ie het perfect. Alleen komt die reCaptcha de eerste keer niet door.

Als ik in de submitHandler de $post { bla } en return false; weghaal, en er een alert in zet, dan geeft de alert ook alleen een reactie als er eerst een keer fout gevalideerd is. Ik begrijp er niets meer van. Ik heb er vandaag 7,5 uur mee geworsteld en vrijdag, zaterdag en zondag bij elkaar 8 uur.

Ik heb het nu werkend maar dan valideer ik de reCaptcha niet in de Validation plugin, maar daarna. Het is niet zo mooi want dan krijg je niet alle meldingen ineens.

Maar volgens mij zie ik echt iets kleins over het hoofd, want op Stackoverflow zeggen ze dat het werkt met dat hidden field. Alleen jammergenoeg geen live demo te zien. Ik zal proberen om met Codepenn mijn probeersel dat half werkt online te zetten.

[BarôZZa]

De JQuery troep hangt aan de clickhandler van de button. Sowieso moet de validatie niet aan een clickhandler hangen, maar aan de form, want je kan ook op enter raggen om een form te versturen.

[ Voor 50% gewijzigd door BarôZZa op 31-10-2017 11:35 ]

[Verwijderd]

@BarôZZa Ja okee, ook geprobeerd, maar het probleem blijft. Dat staat hier los van. Met enter het formulier versturen gaat (gelukkig) ook niet.

[RobIII]

Verwijderd schreef op maandag 30 oktober 2017 @ 16:13:
Nu vond ik op Stackoverflow een handig antwoord hierover. Zie https://stackoverflow.com...-jquery-validation-plugin (en dan het antwoord met de 33 punten).

Daar is, onderaan 't antwoord, 't "share" linkje voor Wat nu als iemand 't antwoord up/downvote? Dan klopt je verwijzing ("33 punten") niet meer Post gewoon het linkje dat de "share" link geeft

[BarôZZa]

Je merkt iig dat het form gesubmit wordt, dus lijkt me prima te debuggen met wat breakpoints in de dev tools.

Wat doet die recaptchacallback eigenlijk?

[Kontsnorretje]

Volgens mij krijgt de submitHandler ook nog een 2e parameter mee. Kijk eens of je daar iets mee kan.

[Verwijderd]

@BarôZZa Die zorgt ervoor dat de waarschuwing dat reCaptcha nog moet worden aangevinkt weggaat als hij daadwerkelijk wordt aangevinkt. Dat werkt goed. Ik was hem er vergeten bij te zetten maar heb hem nu onderaan in de code erbij gezet hier.

Okee, ik ga nog even proberen dan morgen.

[ Voor 8% gewijzigd door Verwijderd op 01-11-2017 15:27 ]

[BarôZZa]

Ik gebruik geen JQuery troep, maar dit staat in de documentatie:

This method sets up event handlers for submit, focus, keyup, blur and click to trigger validation of the entire form or individual elements. Each one can be disabled, see the onxxx options (onsubmit, onfocusout, onkeyup, onclick). focusInvalid focuses elements when submitting an invalid form.

Oftewel, form.validate valideert niet de form maar stelt validatie in voor de form. Je moet die dus uit de onclick halen.

Wat er nu gebeurt als je niet de recaptcha aanklikt is dat de click ervoor zorgt dat de validate functie aan de form wordt gehangen en dat de recaptcha de submit tegenhoudt. Bij de volgende keer wordt het wel gesubmit.

Wanneer de recaptcha wel goed gaat wordt de click event niet gecancelled (preventdefault, geen idee wat de jquery manier is) en het form gesubmit.

[Verwijderd]

@BarôZZa Als ik het direct aan het form hang, zoals onderstaande, dan werkt helemaal niets meer. Hij doet het dan niet als je de recaptcha de eerste keer goed aanvinkt, maar ook niet meer na de waarschuwing, wat eerst wel werkte.

code:

$("#contactformulier").validate({
        ignore: ".ignore",
        rules: {
            hiddenRecaptcha: {
                required: function () {
                    if (grecaptcha.getResponse() == '') {
                        return true;
                    } else {
                        return false;
                    }
                }
            }
        },                  
        messages: {
            hiddenRecaptcha: "Je moet deze spambeveiliging nog even aanvinken",
        },          
        submitHandler: function() {
            $.post("assets/php/email.php", form.serialize(),  function(response) {
                    $(".notificatie").html(response);
                    form.addClass("submitted");
            });
            return false;
        }
});


function recaptchaCallback() {
  $('#hiddenRecaptcha').valid();
};

Als ik het nu weer terugzet zoals eerst, en dan preventdefault voor de button toevoeg, waar zou dat dan moeten gebeuren? De jQuery versie daarvan is: event.preventDefault();

Kontsnorretje schreef op dinsdag 31 oktober 2017 @ 19:56:
Volgens mij krijgt de submitHandler ook nog een 2e parameter mee. Kijk eens of je daar iets mee kan.

Hmmm, klinkt goed, maar ik snap het niet helemaal wat of waar ik iets erbij zou kunnen zetten, een alert ofzo. Bedoel je op regel 22 ergens, boven die return false?

[ Voor 24% gewijzigd door Verwijderd op 05-11-2017 12:22 ]

[Kontsnorretje]

De methode op regel 17 ontvangt 2 argumenten, het form, en het submit event.

Met dit 2e argument kan je het submit event tegenhouden, direct op regel 18.

The rest is up to you

Ohja, wel op basis van je oorspronkelijke code

[ Voor 11% gewijzigd door Kontsnorretje op 01-11-2017 21:23 ]

[Verwijderd]

@Kontsnorretje Thanks. Ik heb alles geprobeerd, maar het form blijft submitten.

Direct op regel 18 heb ik neergezet: event.preventDefault();
Dit is ook wat ik steeds zie terugkomen op Stackoverflow topics.
Ook als ik regel 17 uitbreid met submitHandler: function(form, event) {
(of alleen form of event erin) werkt niet.

Dus helaas, het lukt me echt niet, ik geef het op. Thanks anyway!

[BarôZZa]

Heb je geen link?

[Verwijderd]

@BarôZZa Ja, dat was handig geweest. Kreeg het met Codepen niet aan de praat met het includen van de jquery, bootstrap en reCaptcha. Maar het is inmiddels gelukt, ook met de tips van @Kontsnorretje.

Ik kreeg de event.preventDefault() niet zover dat hij zijn ding deed. Maar inderdaad met die click button eruit slopen (en ik heb ook wat variabele namen eruit gehaald, dat botste ook ergens volgens mij) werkt het nu! Nogmaals dank voor alle hulp!

De werkende code, voor het archief :

code:

$("#contactformulier").validate({
        ignore: ".ignore",
        rules: {
            hiddenRecaptcha: {
                required: function () {
                    if (grecaptcha.getResponse() == '') {
                        return true;
                    } else {
                        return false;
                    }
                }
            }
        },                  
        messages: {
            hiddenRecaptcha: "Je moet deze spambeveiliging nog even aanvinken",
        },          
        submitHandler: function(form,event) {
            event.preventDefault();
            $.post("assets/php/email.php", $("#contactformulier").serialize(),  function(response) {
                    $(".notificatie").html(response);
                    $("#contactformulier").addClass("submitted");
            });
            return false;
        }
});


function recaptchaCallback() {
  $('#hiddenRecaptcha').valid();
};