2017-04-10 95 views
0

我正在嘗試實施新的Google Invisible Recaptcha,並且出於某種原因,我還不知道自動的HTML表單驗證和所需的屬性似乎與Recaptcha一起工作。我猜測這是因爲onSubmit()函數回調。有人可以讓我知道如何解決這個問題嗎?提前致謝。當使用Google Invisible Captcha自動html表單驗證和必需的屬性不起作用。爲什麼?

下面是我使用Google Invisible Recaptcha的表單實現。數據站點密鑰已被有意刪除。

<html> 
 
<head> 
 
    <script src="https://www.google.com/recaptcha/api.js" async defer></script> 
 
    <script> 
 
    function onSubmit(token) { 
 
     document.getElementById("contactForm").submit(); 
 
    } 
 
    </script> 
 
</head> 
 
<body> 
 
<form id="contactForm" action="#" method="POST"> 
 
    <p>Leave a Message</p> 
 
    <label for="inputName">Name</label> 
 
    <input type="text" name="Name" id="inputName" placeholder="Name" required> <br> 
 
    <label for="inputEmail">Email</label> 
 
    <input type="email" name="Email" id="inputEmail" placeholder="Email Id" required> <br> 
 
    <label for="inputMessage">Message</label> 
 
    <input type="text" name="Message" id="inputMessage" placeholder="Message" required><br/> 
 
    <button class="g-recaptcha" type="submit" data-sitekey="//site-key" data-badge="bottomleft" data-callback='onSubmit'>Submit</button> 
 
    <button type="reset">Reset</button> 
 
</form> 
 
</body> 
 
</html>

+0

你確定使用網站密鑰和密碼確認? –

+0

是的,我使用了正確的站點密鑰和密鑰。這不是我第一次使用Google Captcha's。當我嘗試使用他們的新v2 Invisible Captcha時遇到此問題。 – nitinkaveriappa

回答

1

創建一個回調函數,將提交按鈕的onsubmit功能的onclick屬性,然後觸發點擊。

<script> 
function callBack(){ 
    document.getElementById('submit-button').addEventListener('click',onSubmit); 
    document.getElementById('submit-button').click(); 
} 

function onSubmit() { 
//validation code here 
    document.getElementById("contactForm").submit(); 
} 
</script> 

設置這個回調函數的數據回調財產

<button id='submit-button' class="g-recaptcha" type="submit" data-sitekey="//site-key" data-badge="bottomleft" data-callback='callBack'>Submit</button> 
+0

謝謝...... :) – nitinkaveriappa