I've just included the sections I thought were relevant. I would like the form to submit once the JS validates Captcha. But it never goes to the next page. What am I missing?
<body>
<div class="wrapper">
<header>Captcha in JavaScript</header>
<div class="captcha-area">
<div class="captcha-img">
<img src="captcha-bg.png" alt="Captch Background">
<span class="captcha"></span>
</div>
<button class="reload-btn"><i class="fas fa-redo-alt"></i></button>
</div>
<form name:"myform" action="checkout5.php" class="input-area" method="post">
<input type="text" placeholder="Enter captcha" maxlength="6" spellcheck="false" required>
<button type:"submit" value="submit" class="check-btn">Submit</button>
</form>
<div class="status-text"></div>
</div>
<script src="script.js"></script>
</body>
<script>
checkBtn.addEventListener("click", e =>{
e.preventDefault(); //preventing button from it's default behaviour
statusTxt.style.display = "block";
let inputVal = inputField.value.split('').join(' ');
if(inputVal == captcha.innerText){ //if captcha matched
statusTxt.style.color = "#4db2ec";
statusTxt.innerText = "Nice! You don't appear to be a robot.";
setTimeout(()=>{ //calling removeContent & getCaptcha after 2 seconds
removeContent();
getCaptcha();
}, 2000);
}else{
statusTxt.style.color = "#ff0000";
statusTxt.innerText = "Captcha not matched. Please try again!";
}
});
</script>
</html>
You can validate your Captcha on server side (this ex Django).
# Get Captcha Response
captcha_response = request.POST['g-recaptcha-response']
# Get Google Recaptcha Secret key
secret_key = settings.GOOGLE_RECAPTCHA_SECRET_KEY
# Captcha Payload
captcha_payload = {
'secret': secret_key,
'response': captcha_response
}
# Verify Captcha Response
captcha_verify = requests.post(
"https://www.google.com/recaptcha/api/siteverify", data=captcha_payload).json()
# Check if Captcha not Success
if not captcha_verify['success']:
return JsonResponse({"error": "Invalid reCAPTCHA Please try again..."}, status=400)
else:
#your after validate code