JavaScript Google reCAPTCHA nach HTML5 Validation ausführen funktioniert nicht

safeload

Ensign
Registriert
Juni 2010
Beiträge
244
Hallo, ich versuche nun schon seit einiger Zeit Google reCAPTCHA in mein neues Kontaktformular zu integrieren, leider ohne Erfolg.

Hierbei soll das reCAPTCHA nach der HTML5 FormValidierung ausgeführt werden.


Das Formular wird aber stets versendet, auch wenn das reCAPTCHA Häkchen nicht gesetzt wird.

Die Challenge taucht dementsprechend auch nicht auf.


Könnte mir bitte jemand sagen, was an der vom mir verwendeten Einbindung (hab schon mehrere verschiedene Varianten ausprobiert https://stackoverflow.com/ques…idation-before-recaptchas) falsch ist bzw. wie man es besser machen kann?

Code:
<?php require 'sendmail.php'; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
<body>
<form action="dialog.php" method="POST" enctype="multipart/form-data" id="myform">
<script type="text/javascript">
var contact_form;
$(function() {
	contact_form = $('#myform');
	contact_form.submit(function (event) {
		if ( ! contact_form.data('passed')) {
			event.preventDefault();
			grecaptcha.execute();
		}
	});
});
function sendContactForm(token) {
	contact_form.data('passed', true);
	contact_form.submit();
}
</script>
	<div class="g-recaptcha"
		data-sitekey="sitekey"
		data-callback="submitMyForm"
		data-size="inline"> </div>
	<select name="anrede" id="anrede">
	  <option value="Herr" selected>Herr</option>
	  <option value="Frau">Frau</option>
	  <option value="Herr Dr.">Herr Dr.</option>
	  <option value="Frau Dr.">Frau Dr.</option>
	  <option value="Herr Prof. Dr.">Herr Prof. Dr.</option>
	  <option value="Frau Prof. Dr.">Frau Prof. Dr.</option>
	</select>
	<input type="text" name="vorname" class="formular_eingabefeld" id="vorname" maxlength=30 oninvalid="this.setCustomValidity('Bitte füllen Sie dieses Feld aus.')" oninput="setCustomValidity('')" required>
	<input type="text" name="name" class="formular_eingabefeld" id="name" maxlength=30 oninvalid="this.setCustomValidity('Bitte füllen Sie dieses Feld aus.')" oninput="setCustomValidity('')" required>
	<input type="text" name="strasse" class="formular_eingabefeld" id="strasse" maxlength=50>
	&nbsp;Nr.
	<input type="text" name="nr" id="nr" class="formular_eingabefeld" maxlength=4>
	<input type="text" name="plz" id="plz" class="formular_eingabefeld" maxlength=5>
	&nbsp;Ort&nbsp;
	<input type="text" name="ort" id="ort" class="formular_eingabefeld" maxlength=30>
	<input type="text" name="vortel" id="vortel" class="formular_eingabefeld" maxlength=10>
	<span class="slash">.</span>
	<input type="text" name="telefon" id="telefon" class="formular_eingabefeld" maxlength=15>
	eMail&nbsp;&nbsp;
	<input type="email" name="email" id="email" class="formular_eingabefeld" maxlength=75 oninvalid="this.setCustomValidity('Bitte füllen Sie dieses Feld aus.')" oninput="setCustomValidity('')" required>
	<textarea name="message" class="formular_textfeld" id="message" oninvalid="this.setCustomValidity('Bitte füllen Sie dieses Feld aus.')" oninput="setCustomValidity('')" required></textarea>
	<input type="hidden" name="MAX_FILE_SIZE" value="10000000">
	<input name="userfile[]" type="file" multiple class="formular_anhang">
	
	<input type="submit" name="submit" class="formular_buttons" onfocus="if (this.blur) this.blur()" id="submit" value="&nbsp;Nachricht senden&nbsp;">
	<input name="reset" type="reset" class="formular_buttons" onFocus="if (this.blur) this.blur()" value="&nbsp;Zur&uuml;cksetzen&nbsp;">
</form>
</body>
</html>
 
Naja der Submit wird ungeachtet vom Javascript trotzdem ausgeführt (z.B. auch wenn ein Client Javascript deaktiviert hätte) - ändere mal den Submit Button auf ein Type Button und häng da das Javascript Event für die Validierung mit einem onclick dran - dann geht nix mehr ohne Javascript.
Alternativ könntest Du den Submit Button Event abbrechen (aber das geht wieder nur mit Javascript und die Clients ohne Javascript kommen wiederrum ohne Validierung durch).
 
Zuletzt bearbeitet:
OK danke, mit dem Einwand hast Du sicher Recht und Type Button wäre da vorzuziehen, wobei da ja später auch noch die serverseitige reCAPTCHA Validierung kommt. Aber erst mal muss es natürlich clientseitig mal richtig laufen :)

Mein Kernproblem ist: Die Validierung funktioniert (bei aktiv. js) ja als 1. Schritt und hält den Versand auf, nur das reCAPTCHA, das nach der Validierung als 2.Schritt ausgeführt wirksam werden soll, verhindert den Versand nicht, wenn nicht erfolgreich.
 
Zuletzt bearbeitet:
Zurück
Oben