I have implemented ReCaptcha into a SweetAlert alert box. Checking the box to confirm I’m not a robot shows the SweetAlert warning to still verify that I am not a robot.
HTML code to launch the SweetAlert
<form id="request_quote" method="POST" action="quoterequest.php">
<input type = hidden id = "...." value = "..."
<button id="quoteButton" class="mt-4 qbutton btn btn-outline-primary" type="submit">Request Print</button>
</form>
Javascript:
<script type="text/javascript">
$(document).ready(function() {
$("#request_quote").submit(function(e) {
e.preventDefault();
Swal.fire({
title: 'Please enter your email',
input: 'email',
inputAttributes: {
autocapitalize: 'off'
},
html: '<div id="recaptcha"></div>',
didOpen: () => {
grecaptcha.render('recaptcha', {
'sitekey': 'SITE_KEY'
});
},
preConfirm: function () {
if (grecaptcha.getResponse().length === 0) {
Swal.showValidationMessage(`Please verify that you're not a robot`)
}
}
}).then(function(result) {
if (result.isConfirmed) {
...rest of code
I followed the documentation from the SweetAlert recipe site for adding ReCaptcha onto the alert itself, but something is going wrong with how I implemented it and currently the script is unable to be executed as the alert box still says to verify that I am a human.