ReCAPTCHA Has Already Been Rendered in This Element
I Have a Simple Contact Form Built with Asp. Net Using the Updatepanel. Everything Works as Expected but I See the Error Recaptcha__En. Js: Uncaught Error...
I have a simple contact form built with ASP .Net using the updatepanel. Everything works as expected but i see the error
recaptcha__en.js: Uncaught Error: reCAPTCHA has already been rendered in this element
in the console window
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<script src="" async defer></script>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div class="g-recaptcha" data-sitekey="XXXX"></div>
</ContentTemplate>
</asp:UpdatePanel>
<script language="javascript" type="text/javascript">
function pageLoad() {
$('.g-recaptcha').each(function (index, obj) {
grecaptcha.render(obj, { 'sitekey': 'XXXX' });
});
}
</script>
I initially added onload=pageLoad&render=explicit as if the captcha was not checked and you clicked the button to send, the captcha disappeared. Adding onload=pageLoad&render=explicit to the script line resolved this but now i get the above error.
If i try and remove some elements then something else breaks i.e. captcha doesnt display or is not displayed on postback?
5 Answers
I had the same problem a couple days ago with a dynamic login and creation form. The reason was that I was rendering twice at the same element.
The Google ReCaptcha Throws an exception notifying said problem.
My solution was use try{...}catch(event){...} as wrapper for grecaptcha.render()
try{
grecaptcha.render('elementID', {
'sitekey' : 'key',
'badge' : 'att',
'size' : 'att',
'tabindex' : 0,
'callback' : function(token) {
//..
},
'expired-callback' : function() {
//...
},
'error-callback' : function() {
//...
},
'isolated' : false
});
}catch(error){/*possible duplicated instances*/}`
For those who are using React with Firebase and in case this error occurs, you just have to destroy the instance of Recaptcha on unmount of your component.
useEffect(() => {
const verifier = new firebase.auth.RecaptchaVerifier(element.current, {
size: "invisible",
});
if (!recaptcha) {
verifier.verify().then(() => setRecaptcha(verifier));
}
return () => {
verifier.clear()
}
});
If you use Angular with firebase, you must destroy the RecaptchaVerifier after use
//if for example you have declared it as such:
recaptchaVerifier: firebase.default.auth.RecaptchaVerifier;
//you can destroy it as such:
this.recaptchaVerifier.clear()
//you must do for example the destruction when you navigate to a new component
if (!window.recaptchaVerifier) {
window.recaptchaVerifier = new RecaptchaVerifier('sign-in-button', {
'size': 'invisible',
'callback': (response) => {
console.log(response)
},
'expired-callback': () => {
}
}, auth);
}
fix it by adding if()
For angular users, try the google recaptcha v2 using the site key in a try and catch block.
David Miller brings 15 years of experience in global economics, personal finance strategy, and market dynamics. He specializes in turning complex economic trends into actionable insights for everyday readers.
