Uncaught Typ Fehler auf unsichtbare ReCaptcha beim Senden von Formular

Question

Ich versuche, neue unsichtbare Recaptcha von Google zu implementieren.

Aber ich habe Eingaben benötigt und sollte das Formular validieren, bevor recaptcha ausgeführt wird.

Ich habe einen Fehler auf recaptcha Callback-Funktion wie folgt aus:

Uncaught TypeError: document.getElementById() submit is not a function

So wie kann ich das Formular nach dem Validieren und recaptcha ausgeführt?

HTML:

<script src="https://www.google.com/recaptcha/api.js" async defer></script> 

<form id="form" action="?" method="post"> 
    Name: (required) <input id="field" name="field"> 
    <div id='recaptcha' class="g-recaptcha" 
      data-sitekey="6LcAmBAUAAAAAFukLQIkOIICuBBxKEdn-Gu83mcH" 
      data-callback="onSubmit" 
      data-size="invisible"></div> 
    <button id='submit'>submit</button> 
    </form> 
<script>onload();</script> 

Javascript:

function onSubmit(token) { 
    alert('Thanks ' + document.getElementById('field').value + '!'); 
    document.getElementById('form').submit(); // This is error line 
} 

function validate(event) { 
    event.preventDefault(); 
    if (!document.getElementById('field').value) { 
    alert("Please enter your name."); 
    } else { 
    grecaptcha.execute(); 
    } 
} 

function onload() { 
    var element = document.getElementById('submit'); 
    element.onclick = validate; 
} 

JSFiddle: http://jsfiddle.net/dp1cLh28/6/

Answer 1

fand ich die Lösung.

Problem ist Schaltflächen-ID mit der Bezeichnung submit (button id="submit"), die mit der Funktion .submit() in Konflikt steht.

Wenn ich die Schaltfläche ID ändern, funktioniert es!

Ändern Sie den Knopf ID:

<button id='action'>Submit</button> 
      ^submit > action or whatever 

Answer 2

In meinem Fall hatte ich einen Eingang (type = "submit") Tag in Form anstelle einer Taste. Der Name der Eingabe stand im Konflikt mit der Funktion zum Senden.

Die Lösung war dem Input-Tag einen anderen Namen als „Eintragen“ zu geben:

<input type="submit" name="anything-except-submit"> 

ich den Tag explizit zu nennen hatte, weil der Name wurde säumiges Attribut vom Typ „Eintragen“.

Es ist auch wichtig, dass der Rückruf zu beachten, wird nur aufgerufen, wenn der Benutzer erfolgreich die reCAPTCHA, also, wenn Ihr Rückruf jede Form Validierung tun müssen Sie

grecaptcha.reset(); 

nennen, wenn die Überprüfung fehlschlägt. Das bedeutet, dass der Benutzer den reCAPTCHA erneut lösen muss, aber ansonsten wäre er nicht in der Lage, das Formular nach der Korrektur zu senden.