--Multiple Captcha on a Single page v2
1First Html to show a captcha
<div id="newsletter-captcha-box">
<nop-captcha />
<span id="newsletter-captcha-error"></span>
</div>
1.First Script for captcha
<script asp-location="Footer">
var html_element_id;
var onloadCallback = function () {
html_element_id = grecaptcha.render('html_element', {
'sitekey' : '@_captchaSettings.ReCaptchaPublicKey'
});
};
$(function () {
$('#newsletter-subscribe-button').on('click', function () {
function captchaValid() {
var response = grecaptcha.getResponse(html_element_id);
var error = document.getElementById("newsletter-captcha-error");
if (response.length == 0) {
error.innerHTML = "<span style='color: red;'>" +
"The reCAPTCHA response is invalid or malformed. Please try again.</span>"
return false;
}
else {
error.innerHTML = ""
}
return true;
}
isCaptchaValid = captchaValid();
});
$('#newsletter-captcha-box').append("<div id='html_element'></div>");
});
</script>
-- 2. second Html To show a Captcha
<div id="productreview-captcha-box">
<span id="captcha-error"></span>
</div>
--2. second Script for captcha
<script src='https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit'></script>
<script>
$(document).ready(function () {
$('#product-review').validate({ // initialize the plugin
rules: {
"AddProductReview.Title": {
required: true
},
"AddProductReview.ReviewText": {
required: true
}
},
messages: {
"AddProductReview.Title": {
required: "Review title is required."
},
"AddProductReview.ReviewText": {
required: "Review text is required."
}
}
});
});
if (@captchaCheck.ToString().ToLowerInvariant())
{
var html_element_2_id;
var onloadCallback = function() {
html_element_2_id = grecaptcha.render('html_element_2', {
'sitekey' : '@_captchaSettings.ReCaptchaPublicKey'
});
};
$(function() {
$('#product-review').on('click', function() {
var response = grecaptcha.getResponse(html_element_2_id);
var error = document.getElementById("captcha-error");
if (response.length == 0)
{
error.innerHTML = "<span style='color: red;'>" +
"The reCAPTCHA response is invalid or malformed. Please try again.</span>"
return false;
}
else
{
error.innerHTML = ""
}
return true;
});
$('#productreview-captcha-box').append("<div id='html_element_2'></div>");
});
}
</script>